自定义卡片组件 Vue.js + Vuetify

Question

我在互联网上找到了这个卡片组件示例，想用 Vuetify 构建类似的东西。我想知道解决此问题的 best/easiest 方法是什么？使用默认 v-card 并添加自定义 elements/css inside.Or 使用 Vuetify gid 构建整个卡片？

Answer 1

Vuetify 是一个 Vue UI 库，它提供随时可用的组件，可以节省开发人员的时间。因此，如果 Vuetify 提供给你的组件开箱即用，你就没问题，否则添加自定义 CSS 没有错。参考您所附的屏幕截图，vuetify 允许您以几乎相同的方式制作该卡片。除了研究基本组件的功能，我建议你看看 Vuetify 为你提供的现成的 CSS 类。感谢那些你可以做很多事情。希望对您有所帮助。

Answer 2

您可以仅使用 v-card-text child 重新创建与轮廓 v-card 类似的内容。顶部看起来像带轮廓的 v-alert 和左侧 border。在内部使用 v-row 和 v-col（全部使用 col-auto）网格，第一列后的空格为 v-spacer。底部也会有网格。您也可以将 v-alert 放在 v-card-title 中以获得类似的效果，但我认为横幅警报不适合作为“卡片标题”。