vant/src/card

Card

Install

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

Vue.use(Card);

Usage

Basic Usage

<van-card
  num="2"
  price="2.00"
  title="Title"
  desc="Description"
  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
/>

Discount Info

<van-card
  num="2"
  tag="Tag"
  price="2.00"
  title="Title"
  desc="Description"
  origin-price="10.00"
  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
/>

Custom Content

Use slot to custom content.

<van-card
  num="2"
  title="Title"
  desc="Description"  
  price="2.00"
  thumb="https://img.yzcdn.cn/vant/t-thirt.jpg"
>
  <div slot="tags">
    <van-tag plain type="danger">Tag</van-tag>
    <van-tag plain type="danger">Tag</van-tag>
  </div>
  <div slot="footer">
    <van-button size="mini">Button</van-button>
    <van-button size="mini">Button</van-button>
  </div>
</van-card>

API

Props

Attribute	Description	Type	Default	Version
thumb	Left thumb image URL	string	-	-
title	Title	string	-	-
desc	Description	string	-	-
tag	Tag	string	-	-
num	number	string | number	-	-
price	Price	string | number	-	-
origin-price	Origin price	string | number	-	-
centered	Whether content vertical centered	boolean	false	-
currency	Currency symbol	string	¥	-
thumb-link	Thumb link URL	string	-	-
lazy-load	Whether to enable thumb lazy load，should register Lazyload component	boolean	false	-

Events

Event	Description	Arguments
click	Triggered when clicked	event: Event
click-thumb	Triggered when thumb clicked	event: Event

Slots

Name	Description
title	Custom title
desc	Custom description
num	Custom num
price	Custom price
origin-price	Custom origin price
bottom	Custom price bottom
thumb	Custom thumb
tag	Custom thumb tag
tags	Custom tags
footer	Custom footer