如何用vuetify2实现所有V卡的等高
如何用vuetify2实现所有V卡的等高
提问于 2019-09-15 13:35:10
随着这一点变得疯狂，我想让vuetify2项目中的所有v-card的大小相等。我的中心(v-card-text)有不同的字符数(text)。使用固定高度的v-card-text进行测试，但如果文本更长，则没有预期的滚动条。
这是一个v-card组件的标记：
<template>
<v-card class="elevation-5" fill-height>
<v-card-title primary-title>
<h3 class="headline mb-0">{{ name }}</h3>
</v-card-title>
<v-card-text>
<div class="body-1">{{ description }}</div>
<v-divider light style="margin-top:15px;" />
<v-divider light />
</v-card-text>
<v-card-actions v-if="showButtons">
<v-btn color="green">
<a :href="url">VISIT</a>
</v-btn>
</v-card-actions>
</v-card>
</template>这是父组件：
<template>
<div>
<v-row class="ma-2">
<v-col md="4" class="pa-3" v-for="i in items" :key="i.id">
<Item :show-buttons="true" :item="i" />
</v-col>
</v-row>
</div>
</template>父级放置在以下位置：
<v-content>
<v-container fluid ma-0 pa-0>
<router-view />
</v-container>
</v-content>请看这个屏幕，也许这会让我糟糕的英语更容易理解。
回答 3
Stack Overflow用户
回答已采纳
发布于 2019-09-15 20:15:27
在文本区域中设置高度和溢出：
<v-card-text style="overflow-y: auto; height:100px" >
<div class="body-1">{{ description }}</div>
<v-divider light style="margin-top:15px;" />
<v-divider light />
</v-card-text>最好使用class，但为了便于掌握，我在这里使用了style。
Stack Overflow用户
发布于 2019-09-16 02:20:54
我想你要找的东西是这样的：
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
items: [
{ id: 1, name: 'A', description: 'Short', showButtons: true },
{ id: 2, name: 'B', description: 'Short', showButtons: false },
{ id: 3, name: 'C', description: 'Longer text that wraps onto multiple lines', showButtons: true }
]
}
}
})#app {
max-width: 500px;
}<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://unpkg.com/@mdi/font@3.9.97/css/materialdesignicons.css" rel="stylesheet">
<link href="https://unpkg.com/vuetify@2.0.17/dist/vuetify.css" rel="stylesheet">
<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.0.17/dist/vuetify.js"></script>
<div id="app">
<v-app>
<div>
<v-row class="ma-2">
<v-col md="4" class="pa-3 d-flex flex-column" v-for="i in items" :key="i.id">
<v-card class="elevation-5 flex d-flex flex-column">
<v-card-title primary-title>
<h3 class="headline mb-0">{{ i.name }}</h3>
</v-card-title>
<v-card-text class="flex">
<div class="body-1">{{ i.description }}</div>
<v-divider light style="margin-top:15px;"></v-divider>
<v-divider light></v-divider>
</v-card-text>
<v-card-actions v-if="i.showButtons">
<v-btn color="green">
<a>VISIT</a>
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</div>
</v-app>
</div>
我在一些地方添加了类d-flex、flex-column和flex，但除此之外，它应该等同于问题中发布的代码。d-flex flex-column使父级成为弹性框列，然后flex将子级设置为flex: auto，这样它就可以伸展以填充空间。这里有一个微妙之处，即可用空间由最高的项定义，因此存在排序的循环。
Stack Overflow用户
发布于 2020-04-12 20:35:59
你只需要在v-row中将'align‘属性设置为"stretch“：
<template>
<div>
<v-row align="stretch" class="ma-2">
<v-col md="4" class="pa-3" v-for="i in items" :key="i.id">
<Item :show-buttons="true" :item="i" />
</v-col>
</v-row>
</div>
</template>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57941447
复制相关文章
相似问题
腾讯云开发者
