如何使用Vue.js+Vuetify实现示例同款自定义卡片组件

实现方案推荐 #

优先选择默认v-card组件搭配内置子组件+少量自定义CSS的方案，比自行用Vuetify Grid从零搭建结构成本低、可维护性更好：

• v-card已经内置了卡片通用的阴影、圆角、间距、响应式适配逻辑，不需要重复实现基础样式
• 可以直接搭配v-card官方配套的v-img、v-card-title、v-card-subtitle、v-card-text、v-card-actions等子组件快速搭建基础结构，仅需要对特殊视觉效果（比如角落标签、悬浮动效等）写少量自定义CSS即可

最简实现示例 #

<template>
  <v-card class="product-card" max-width="360" elevation="2">
    <!-- 顶部商品图区域 -->
    <v-img
      src="替换为你的商品图地址"
      height="220"
      cover
      class="position-relative"
    >
      <!-- 右上角折扣标签 -->
      <v-chip
        color="red"
        dark
        size="small"
        class="position-absolute top-2 right-2"
      >
        -30%
      </v-chip>
    </v-img>

    <!-- 内容区 -->
    <v-card-title class="text-h6 font-bold pb-1">复古休闲运动鞋</v-card-title>
    <div class="px-4 d-flex align-center gap-2">
      <v-rate v-model="rating" size="14" readonly color="amber" />
      <span class="text-caption grey--text">(128条评价)</span>
    </div>
    <v-card-text class="pt-1">
      <div class="d-flex align-center gap-2">
        <span class="text-h5 red--text font-weight-bold">¥299</span>
        <span class="text-caption text-decoration-line-through grey--text">¥429</span>
      </div>
      <p class="text-body-2 mt-1 grey--text text-truncate">
        真皮鞋面、防滑鞋底，多色可选，适合日常休闲穿搭
      </p>
    </v-card-text>

    <!-- 底部操作栏 -->
    <v-card-actions class="px-4 pb-4 d-flex justify-space-between">
      <v-btn color="primary" block>加入购物车</v-btn>
      <v-btn icon class="ml-2">
        <v-icon>mdi-heart-outline</v-icon>
      </v-btn>
    </v-card-actions>
  </v-card>
</template>

<script setup>
import { ref } from 'vue'
const rating = ref(4.5)
</script>

<style scoped>
.product-card {
  transition: all 0.25s ease;
}
.product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}
</style>

方案对比说明 #

只有当你的卡片布局完全脱离常规卡片结构，需要非常灵活的不规则网格排布时，才需要考虑用Vuetify Grid自行搭建结构。绝大多数常规卡片场景用v-card即可满足需求，开发效率更高，也符合Vuetify的设计规范。

内容的提问来源于stack exchange，提问作者Gabriel