Card 卡片

使用指南

  1. import { Card } from 'vant';
  3. 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

参数说明类型默认值版本
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内容是否垂直居中Stringfalse-
currency货币符号String¥-
thumb-link点击左侧图片后的跳转链接String-1.3.4
lazy-load是否开启图片懒加载，须配合 Lazyload 组件使用Booleanfalse1.5.0

Event

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

Slot

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

原文: https://youzan.github.io/vant/#/zh-CN/card