Vant Card card

May 07, 2021 Vant

Introduced

import Vue from 'vue';
import { Card } from 'vant';

Vue.use(Card);

Code demo

Basic usage

<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品标题"
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>

Marketing messages

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"
/>

Custom content

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>

Api

Props

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`

Events

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

Slots

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