vue.js - vuetify 中的 v-tabs 没有占据 100% 的高度

Question

v-tabs 组件不会占用 100% 的高度。检查后，我可以看到所有选项卡项(即选项卡内容)都被包裹在

<div class='v-tab__items'>  
  your content  
</div>

如何定位 v-tab__items 类？或者有另一种方法可以达到同样的目的吗？我尝试了 Vuetify 的 height API，它没有产生预期的结果。

感谢任何帮助:)

Answer 1

上下文

我在这里发布了一个答案，因为我在搜索解决我自己的问题时发现了这个问题。在我的例子中，我希望选项卡内容占据所有高度。这听起来与您的问题相似，但由于该问题没有提供任何具体问题，我将做出一些假设。

解决方案

自 v-tab__items将具有其内容的高度，为具有所需高度的内容创建父元素，在我的例子中，我使用视口(viewport)高度(请注意，由于选项卡也有自己的高度，内容必须考虑到这一点)。我将它与 <v-layout align-center justify-center column fill-height/> 结合使用.请参阅以下示例:

new Vue({
  el: '#app'
})

.tab-item-wrapper {
  /* vuetify sets the v-tabs__container height to 48px */
  height: calc(100vh - 48px)
}

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.6/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-tabs>
      <v-tab>tab</v-tab>
      <v-tab-item>
        <div class="tab-item-wrapper">
          <v-layout align-center justify-center column fill-height>
            <v-btn color="success">Success</v-btn>
            <v-btn color="error" outline>Error</v-btn>
          </v-layout>
        </div>
      </v-tab-item>
    </v-tabs>
  </v-app>
</div>

注意:我找不到避免对 tab-height 进行硬编码的解决方案, 目前这是 hardcoded on Vuetify styles它没有公开为 variable .

编辑 v-layout 的更新片段起始标记是自动关闭的。