Vant3 Card 卡片

介紹

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

實(shí)例演示

引入

通過以下方式來全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

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

代碼演示

基礎(chǔ)用法

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

營(yíng)銷信息

通過 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"
>
  <template #tags>
    <van-tag plain type="danger">標(biāo)簽</van-tag>
    <van-tag plain type="danger">標(biāo)簽</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 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。