如何制作v-tab项和v-tab项填充高度

Question

我遵循的示例： https : //vuetifyjs.com/en/components/tabs#content

<v-tabs-items v-model="model">
    <v-tab-item
      v-for="i in 3"
      :key="i"
      :value="`tab-${i}`"
    >
      <v-card flat>
        <v-card-text v-text="text"></v-card-text>
      </v-card>
    </v-tab-item>
  </v-tabs-items>

但是，我希望v卡能够承受其余的高度。 我该如何实现？

Answer 1

上面的amatyjajo给出的方法效果很好，但是，如果您正在使用scoped样式块内的组件，则需要使用深选择器来访问嵌套的Windows容器，例如：

.tab-items-row >>> .v-window__container,
.tab-items-row >>> .v-window-item {
  height: 100%;
}

Answer 2

我今天遇到了这个问题。 对我有用的一种可能的解决方案是使用检查器找出由vuetify生成的类的层次结构，然后修改这些特定类的css。 这是基于此SO答案中的建议，该建议建议修改.v-tabs__content的高度。 不幸的是，该类似乎不再存在，而是（在您发布的示例中）生成的层次结构类似于

<div>
<!-- Top level container of the tabbed interface -->
  <nav>
    <!-- Toolbar and tab header generated here -->
  </nav>
  <div class="v-window">
    <div class="v-window__container">
      <div class="v-window-item">
        <div class="v-card">
          <div class="v-card__text">Text.</div>
        </div>
      </div>
    </div>
  </div>
</div>

因此，有必要修改v-window ， v-window__container和v-window-item的css高度，以确保选项卡内容容器可以根据需要扩展到其父级的大小。 最后，我们需要更改内部内容的高度，在这种情况下为v-card 。

在我的代码我最终也设置display:flex的容器包装，并flex只为.v-window 。 使用flex可确保一切在工具栏下方正确对齐，并最终确保选项卡内容的正确拉伸高度。

这是一个带有我的解决方案https://codepen.io/anon/pen/wNEOdy的codepen，适用于您发布的示例。

HTML：

<div id="app">
  <v-app id="inspire">
    <div class="tab-wrapper">
      <v-toolbar
        color="cyan"
        dark
        tabs
      >
        <v-toolbar-side-icon></v-toolbar-side-icon>

        <v-toolbar-title>Page title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>search</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>more_vert</v-icon>
        </v-btn>

        <v-tabs
          slot="extension"
          v-model="model"
          centered
          color="cyan"
          slider-color="yellow"
        >
          <v-tab
            v-for="i in 3"
            :key="i"
            :href="`#tab-${i}`"
          >
            Item {{ i }}
          </v-tab>
        </v-tabs>
      </v-toolbar>

      <v-tabs-items v-model="model">
        <v-tab-item
          v-for="i in 3"
          :key="i"
          :value="`tab-${i}`"
        >
          <v-card flat>
            <v-card-text v-text="text"></v-card-text>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </div>
  </v-app>
</div>

CSS：

.tab-wrapper {
  height:100%; /* Set to desired height of entire tabbed section, or use flex, or ... */
  display:flex; 
  flex-direction: column;
}

.tab-wrapper .v-window{
  flex: 1;
}

.tab-wrapper .v-window__container,
.tab-wrapper .v-window-item  {
  height: 100%;
}

/* customise the dimensions of the card content here */
.tab-wrapper .v-card {
  height: 100%;
}

JS：

new Vue({
  el: '#app',
  data () {
    return {
      model: 'tab-2',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
    }
  }
})

Answer 3

<style>
  .v-window__container {
    height: 100%
  }
</style>

为我做了