Card 卡片

介绍

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

引入

  1. import Vue from 'vue';
  2. import { Card } from 'vant';
  3. Vue.use(Card);

代码演示

基础用法

  1. <van-card
  2. num="2"
  3. price="2.00"
  4. desc="描述信息"
  5. title="商品标题"
  6. thumb="https://img.yzcdn.cn/vant/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://img.yzcdn.cn/vant/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://img.yzcdn.cn/vant/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: Event
click-thumb点击自定义图片时触发event: Event

Slots

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

样式变量

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

名称默认值描述
@card-padding@padding-xs @padding-md-
@card-font-size@font-size-sm-
@card-text-color@text-color-
@card-background-color@background-color-light-
@card-thumb-size88px-
@card-thumb-border-radius@border-radius-lg-
@card-title-line-height16px-
@card-desc-color@gray-7-
@card-desc-line-height@line-height-md-
@card-price-color@gray-8-
@card-origin-price-color@gray-6-
@card-num-color@gray-6-
@card-origin-price-font-size@font-size-xs-
@card-price-font-size@font-size-sm-
@card-price-integer-font-size@font-size-lg-
@card-price-font-family@price-integer-font-family-

Card 商品卡片 - 图1