Question

如何设置vuetify卡内容的正确大小以启用滚动？不幸的是，vuetify文档仅显示最简单的情况，但数据不真实。这是卡片内的列表和页脚：

https://jsfiddle.net/Feofilakt/0Lnzteqm/

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {},
  data: {}
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.css" rel="stylesheet"/>

<div id="app">
  <v-app>
    <v-card height="400px">
      <v-toolbar card>
        <v-toolbar-title>Title</v-toolbar-title>
      </v-toolbar>

      <v-divider></v-divider>

      <v-card-text>
        <v-list>
          <template v-for="i in 40">
            <v-list-tile>
              <v-list-tile-content>
                <div>{{ i }}</div>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>

        <v-footer>
          <div>Footer</div>
        </v-footer>
      </v-card-text>
    </v-card>
  </v-app>
</div>

Answer 1

您可以使用CSS解决此问题

HTML

<v-card height="400px" class="scroll">
  .....
</v-card>

CSS

.scroll {
   overflow-y: scroll
}

Answer 2

找到了解决方案。需要将弹性框样式应用于v卡组件的各个部分：

Vue.use(Vuetify);

var vm = new Vue({
  el: "#app",
  methods: {},
  data: {}
});

html {
  overflow: hidden !important;
}

.v-card {
  display: flex !important;
  flex-direction: column;
}

.v-card__text {
  flex-grow: 1;
  overflow: auto;
}

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.16/dist/vuetify.min.css" rel="stylesheet" />

<div id="app">
  <v-app>
    <v-card height="200px">
      <v-toolbar card>
        <v-toolbar-title>Title</v-toolbar-title>
      </v-toolbar>

      <v-divider></v-divider>

      <v-card-text>
        <v-list>
          <template v-for="i in 40">
            <v-list-tile>
              <v-list-tile-content>
                <div>{{ i }}</div>
              </v-list-tile-content>
            </v-list-tile>
          </template>
        </v-list>
      </v-card-text>

      <v-footer class="pa-2">Footer</v-footer>
    </v-card>
  </v-app>
</div>

Vuetify：卡内滚动列表

2 个答案: