Vant3 Card 卡片

介紹

商品卡片，用于展示商品的圖片、價格等信息。

實例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

const app = createApp();
app.use(Card);

代碼演示

基礎用法

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

營銷信息

通過 origin-price 設置商品原價，通過 tag 設置商品左上角標簽。

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

自定義內容

Card 組件提供了多個插槽，可以靈活地自定義內容。

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

API

Props

Events

Slots

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。