Vant Card 卡片

引入

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

Vue.use(Card);

代碼演示

基礎(chǔ)用法

<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品標(biāo)題"
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
/>

營銷信息

通過origin-price設(shè)置商品原價(jià)，通過tag設(shè)置商品左上角標(biāo)簽

<van-card
  num="2"
  tag="標(biāo)簽"
  price="2.00"
  desc="描述信息"
  title="商品標(biāo)題"
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
  origin-price="10.00"
/>

自定義內(nèi)容

Card組件提供了多個(gè)插槽，可以靈活地自定義內(nèi)容

<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品標(biāo)題"
  thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
>
  <div slot="tags">
    <van-tag plain type="danger">標(biāo)簽</van-tag>
    <van-tag plain type="danger">標(biāo)簽</van-tag>
  </div>
  <div slot="footer">
    <van-button size="mini">按鈕</van-button>
    <van-button size="mini">按鈕</van-button>
  </div>
</van-card>

API

Props

Events

Slots