Vant4 Card 商品卡片

介紹

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

引入

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

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://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
/>

營銷信息

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

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

自定義內(nèi)容

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

<van-card
  num="2"
  price="2.00"
  desc="描述信息"
  title="商品標(biāo)題"
  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
>
  <template #tags>
    <van-tag plain type="primary">標(biāo)簽</van-tag>
    <van-tag plain type="primary">標(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

類型定義

組件導(dǎo)出以下類型定義：

import type { CardProps } from 'vant';

主題定制

樣式變量

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