Card 卡片

使用指南

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

代码演示

基础用法

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

高级用法

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

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

API

参数 说明 类型 默认值
thumb 左侧图片 String -
title 标题 String -
desc 描述 String -
num 商品数量 String Number -
price 商品价格 String Number -
centered 内容是否垂直居中 String false
currency 货币符号 String ¥

Slot

名称 说明
title 自定义标题
desc 自定义描述
tags 自定义 tags
thumb 自定义 thumb
footer 自定义 footer

原文:

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