Card 卡片

引入

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

代码演示

基础用法

  1. <van-card
  2. num="2"
  3. price="2.00"
  4. desc="描述信息"
  5. title="商品标题"
  6. :thumb="imageURL"
  7. />

高级用法

可以通过具名插槽添加定制内容

  1. <van-card
  2. num="2"
  3. tag="标签"
  4. price="2.00"
  5. desc="描述信息"
  6. title="商品标题"
  7. :thumb="imageURL"
  8. origin-price="10.00"
  9. >
  10. <div slot="footer">
  11. <van-button size="mini">按钮</van-button>
  12. <van-button size="mini">按钮</van-button>
  13. </div>
  14. </van-card>

API

Props

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

Events

事件名说明回调参数
click点击时触发-

Slots

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

Card 商品卡片 - 图1