如何制作 v-tabs-items 和 v-tab-item 填充高度

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-card 占据其余的高度。我怎样才能实现它？

Answer 1

我今天遇到了这个问题。对我有用的一种可能的解决方案是找出由 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>

因此，有必要修改的CSS的高度v-window，v-window__container以及v-window-item根据需要，以确保标签内容容器延伸到其父的大小。最后，我们需要更改内部内容的高度，在本例中为v-card.

在我的代码中，我最终还设置display:flex了容器包装器，并且flex仅适用于.v-window. 使用 flex 可确保工具栏下方的所有内容正确对齐，并最终确保选项卡内容的正确拉伸高度。

这是我的解决方案https://codepen.io/anon/pen/wNEOdy的代码笔，适用于您发布的示例。

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 2

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

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