Card 商品卡片 - Vant 4
Card 卡片
🛍️ 介绍
想象一下，你走进一家精美的商店，每件商品都被精心陈列在橱窗里 ✨。Card 卡片组件就是你的"数字橱窗"！
这个小小的卡片承载着大大的使命 🎯：
- 📸 颜值担当：精美的商品图片展示，第一眼就抓住用户的心
- 💰 价格透明：清晰的价格信息，让用户一目了然
- 🏷️ 信息丰富：标题、描述、标签，该有的都有
- 🎨 高度定制：想要什么样的布局？随你心意！
无论是电商应用、产品展示还是内容卡片，Card 组件都能让你的界面瞬间变得专业又吸引人。就像给每个商品都配了一个专属的"形象代言人" 🌟！
📦 引入
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
import { createApp } from'vue'; import { Card } from'vant'; const app = createApp(); app.use(Card);🎯 代码演示
基础用法
就像搭积木一样简单 🧱！最基础的卡片包含了一个商品展示的"黄金三角"：精美图片、吸引人的标题，还有那个让人心动的价格 💝。
这就是 Card 组件的"素颜"状态，简约而不简单，已经足够让你的商品闪闪发光了！
营销信息
想要制造"限时抢购"的紧迫感？想要突出"超值优惠"的诱惑力 🔥？
origin-price 就像是商品的"身份证"，展示原价让用户感受到优惠的力度。而 tag 标签就像是商品左上角的"小红旗" 🚩，无论是"新品"、"热销"还是"限量"，都能瞬间抓住用户的眼球！
这些营销元素就像是商品的"化妆师"，让普通商品也能变得光彩夺目 ✨。
自定义内容
Card 组件就像一个"万能魔盒" 🎁，提供了丰富的插槽让你尽情发挥创意！
想要添加评分星星？想要放个购买按钮？想要展示更多商品信息？统统没问题！就像在画布上自由创作，想要什么样的布局，完全由你的想象力决定 🎨！
API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| thumb | 左侧图片 URL | string | - |
| title | 标题 | string | - |
| desc | 描述 | string | - |
| tag | 图片角标 | string | - |
| num | 商品数量 | *number | string* |
| price | 商品价格 | *number | string* |
| origin-price | 商品划线原价 | *number | string* |
| centered | 内容是否垂直居中 | boolean | false |
| currency | 货币符号 | string | ¥ |
| thumb-link | 点击左侧图片后跳转的链接地址 | string | - |
| lazy-load | 是否开启图片懒加载，须配合 Lazyload 组件使用 | boolean | false |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | event: MouseEvent |
| click-thumb | 点击自定义图片时触发 | event: MouseEvent |
Slots
| 名称 | 说明 |
|---|---|
| title | 自定义标题 |
| desc | 自定义描述 |
| num | 自定义数量 |
| price | 自定义价格 |
| origin-price | 自定义商品原价 |
| price-top | 自定义价格上方区域 |
| bottom | 自定义价格下方区域 |
| thumb | 自定义图片 |
| tag | 自定义图片角标 |
| tags | 自定义描述下方标签区域 |
| footer | 自定义右下角内容 |
类型定义
组件导出以下类型定义：
importtype { CardProps } from'vant';主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-card-padding | var(--van-padding-xs) var(--van-padding-md) | - |
| --van-card-font-size | var(--van-font-size-sm) | - |
| --van-card-text-color | var(--van-text-color) | - |
| --van-card-background | var(--van-background) | - |
| --van-card-thumb-size | 88px | - |
| --van-card-thumb-radius | var(--van-radius-lg) | - |
| --van-card-title-line-height | 16px | - |
| --van-card-desc-color | var(--van-text-color-2) | - |
| --van-card-desc-line-height | var(--van-line-height-md) | - |
| --van-card-price-color | var(--van-text-color) | - |
| --van-card-origin-price-color | var(--van-text-color-2) | - |
| --van-card-num-color | var(--van-text-color-2) | - |
| --van-card-origin-price-font-size | var(--van-font-size-xs) | - |
| --van-card-price-font-size | var(--van-font-size-sm) | - |
| --van-card-price-integer-font-size | var(--van-font-size-lg) | - |
| --van-card-price-font | var(--van-price-font) | - |
🎯 最佳实践
💡 使用场景推荐
Card 组件就像一个多面手，在各种场景下都能大显身手：
🛒 电商商品展示
<!-- 突出促销信息，吸引用户购买 -->
<van-card
:price="99.00"
:origin-price="199.00"
title="限时特惠商品"
desc="品质保证，限量发售"
tag="限时抢购"
thumb="https://example.com/product.jpg"
/>📱 应用推荐卡片
<!-- 展示应用信息，引导下载 -->
<van-card
title="超好用的工具App"
desc="提升效率，简化生活"
tag="编辑推荐"
>
<template #footer>
<van-button size="mini" type="primary">立即下载</van-button>
</template>
</van-card>📰 内容资讯卡片
<!-- 新闻文章展示 -->
<van-card
title="科技前沿：AI技术新突破"
desc="人工智能领域又有重大进展..."
tag="热门"
>
<template #tags>
<van-tag size="mini">科技</van-tag>
<van-tag size="mini">AI</van-tag>
</template>
</van-card>⚡ 性能优化小贴士
- 图片懒加载：对于长列表，开启
lazy-load可以显著提升页面性能 - 合理使用插槽：只在需要时使用自定义插槽，避免过度复杂化
- 图片尺寸优化：确保商品图片尺寸适中，避免加载过大的图片
🎨 设计建议
- 信息层级：价格信息应该最突出，标题次之，描述最后
- 图片质量：使用高质量的商品图片，建议比例为 1:1 或 4:3
- 标签使用：标签要简洁有力，避免过长的文字
- 色彩搭配：价格颜色可以使用品牌色或红色来突出优惠感
🔧 常见问题解决
Q: 如何让卡片内容垂直居中？ A: 设置 centered 属性为 true，特别适合内容较少的卡片。
Q: 如何自定义价格显示格式？ A: 使用 price 插槽可以完全自定义价格的显示方式。
Q: 图片加载失败怎么办？ A: 可以通过 thumb 插槽自定义图片组件，添加错误处理逻辑。
🔗 相关组件
- Image 图片 - Card 组件的图片展示基于此组件
- Tag 标签 - 常用于 Card 组件的标签展示
- Button 按钮 - 常在 Card 的 footer 插槽中使用
- Lazyload 懒加载 - 配合 Card 实现图片懒加载
- Grid 宫格 - 多个 Card 的网格布局展示
📚 延伸阅读
💡 小提示：一个好的商品卡片不仅仅是信息的展示，更是用户购买决策的重要影响因素。合理运用 Card 组件的各种特性，可以显著提升用户的购物体验和转化率！