【发布时间】：2021-11-04 14:16:13
【问题描述】：
我在互联网上找到了这个卡片组件示例，并想用 Vuetify 构建类似的东西。我想知道解决此问题的最佳/最简单方法是什么？使用默认的 v-card 并在里面添加自定义元素/css。或者使用 Vuetify gid 构建整个卡？
【问题讨论】：
标签： vuetify.js
【发布时间】：2021-11-04 14:16:13
【问题描述】：
您可以使用带有轮廓的 v-card 重新创建类似的东西，只有一个 v-card-text 子级。顶部看起来像一个轮廓的v-alert，左边是border。在内部使用v-row 和v-col（全部为col-auto）网格，在第一列之后的空白处使用v-spacer。底部也将有网格。您也可以将v-alert 放在v-card-title 中以获得类似的效果，但我认为横幅警报不适合作为“卡片标题”。
【讨论】：
Vuetify 是一个 Vue UI 库，它提供了现成的组件，从而节省了开发人员的时间。因此，如果 Vuetify 提供给您的组件开箱即用，那就没问题，否则添加自定义 CSS 没有任何问题。参考您附加的屏幕截图，vuetify 允许您以几乎相同的方式制作该卡。除了学习基本组件的功能外，我建议你看看 Vuetify 为你提供的现成的 CSS 类。感谢那些你可以做很多事情的人。希望对您有所帮助。
【讨论】：