May 07, 2021 Vant
import Vue from 'vue';
import { Card } from 'vant';
Vue.use(Card);
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>
Set the original price of the item through origin-price and the top left corner label of the item via tag
<van-card
num="2"
tag="标签"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
origin-price="10.00"
/>
The Card component provides multiple slots for the flexibility to customize content
<van-card
num="2"
price="2.00"
desc="描述信息"
title="商品标题"
thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
>
<div slot="tags">
<van-tag plain type="danger">标签</van-tag>
<van-tag plain type="danger">标签</van-tag>
</div>
<div slot="footer">
<van-button size="mini">按钮</van-button>
<van-button size="mini">按钮</van-button>
</div>
</van-card>
Parameters | Description | Type | The default |
---|---|---|---|
thumb | The picture URL on the left | string | - |
title | Title | string | - |
desc | Describe | string | - |
tag | Picture cornering | string | - |
Num | The quantity of goods | number | string | - |
price | Commodity prices | number | string | - |
origin-price | The original price of the product | number | string | - |
centered | Whether the content is centered vertically | boolean |
false
|
currency | Currency symbol | string |
¥
|
thumb-link | Click on the link address that jumps after clicking on the picture on the left | string | - |
lazy-load | Whether to turn on lazy loading of pictures should be used in conjunction with the Lazyload component | boolean |
false
|
The name of the event | Description | Callback parameters |
---|---|---|
Click | Triggered when clicked | event: Event |
click-thumb | Triggered when you click on a custom picture | event: Event |
Name | Description |
---|---|
title | Custom title |
desc | Custom description |
Num | The custom quantity |
price | Custom prices |
origin-price | Customize the original price of the item |
price-top | Customize the area above the price |
bottom | Customize the area below the price |
thumb | Customize the picture |
tag | Customize the picture corner |
tags | Customize the label area below the description |
footer | Customize the content in the lower right corner |