Card 卡片

介绍

商品卡片,用于展示商品的图片、价格等信息。

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册

  1. import { createApp } from 'vue';
  2. import { Card } from 'vant';
  3. const app = createApp();
  4. app.use(Card);

代码演示

基础用法

  1. <van-card
  2. num="2"
  3. price="2.00"
  4. desc="描述信息"
  5. title="商品标题"
  6. thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  7. />

营销信息

通过 origin-price 设置商品原价,通过 tag 设置商品左上角标签。

  1. <van-card
  2. num="2"
  3. tag="标签"
  4. price="2.00"
  5. desc="描述信息"
  6. title="商品标题"
  7. thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  8. origin-price="10.00"
  9. />

自定义内容

Card 组件提供了多个插槽,可以灵活地自定义内容。

  1. <van-card
  2. num="2"
  3. price="2.00"
  4. desc="描述信息"
  5. title="商品标题"
  6. thumb="https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
  7. >
  8. <template #tags>
  9. <van-tag plain type="danger">标签</van-tag>
  10. <van-tag plain type="danger">标签</van-tag>
  11. </template>
  12. <template #footer>
  13. <van-button size="mini">按钮</van-button>
  14. <van-button size="mini">按钮</van-button>
  15. </template>
  16. </van-card>

API

Props

参数说明类型默认值
thumb左侧图片 URLstring-
title标题string-
desc描述string-
tag图片角标string-
num商品数量number | string-
price商品价格number | string-
origin-price商品划线原价number | string-
centered内容是否垂直居中booleanfalse
currency货币符号string¥
thumb-link点击左侧图片后跳转的链接地址string-
lazy-load是否开启图片懒加载,须配合 Lazyload 组件使用booleanfalse

Events

事件名说明回调参数
click点击时触发event: MouseEvent
click-thumb点击自定义图片时触发event: MouseEvent

Slots

名称说明
title自定义标题
desc自定义描述
num自定义数量
price自定义价格
origin-price自定义商品原价
price-top自定义价格上方区域
bottom自定义价格下方区域
thumb自定义图片
tag自定义图片角标
tags自定义描述下方标签区域
footer自定义右下角内容

类型定义

组件导出以下类型定义:

  1. import type { CardProps } from 'vant';

主题定制

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件

名称默认值描述
—van-card-paddingvar(—van-padding-xs) var(—van-padding-md)-
—van-card-font-sizevar(—van-font-size-sm)-
—van-card-text-colorvar(—van-text-color)-
—van-card-background-colorvar(—van-gray-1)-
—van-card-thumb-size88px-
—van-card-thumb-border-radiusvar(—van-border-radius-lg)-
—van-card-title-line-height16px-
—van-card-desc-colorvar(—van-gray-7)-
—van-card-desc-line-heightvar(—van-line-height-md)-
—van-card-price-colorvar(—van-gray-8)-
—van-card-origin-price-colorvar(—van-text-color-2)-
—van-card-num-colorvar(—van-text-color-2)-
—van-card-origin-price-font-sizevar(—van-font-size-xs)-
—van-card-price-font-sizevar(—van-font-size-sm)-
—van-card-price-integer-font-sizevar(—van-font-size-lg)-
—van-card-price-font-familyvar(—van-price-integer-font-family)-

Card 商品卡片 - 图1