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

参数	说明	类型	默认值
thumb	左侧图片 URL	string	-
title	标题	string	-
desc	描述	string	-
tag	图片角标	string	-
num	商品数量	number | string	-
price	商品价格	number | string	-
origin-price	商品划线原价	number | string	-
centered	内容是否垂直居中	boolean	false
currency	货币符号	string	¥
thumb-link	点击左侧图片后跳转的链接地址	string	-
lazy-load	是否开启图片懒加载，须配合 Lazyload 组件使用	boolean	false

Events

事件名	说明	回调参数
click	点击时触发	event: MouseEvent
click-thumb	点击自定义图片时触发	event: MouseEvent

Slots

名称	说明
title	自定义标题
desc	自定义描述
num	自定义数量
price	自定义价格
origin-price	自定义商品原价
price-top	自定义价格上方区域
bottom	自定义价格下方区域
thumb	自定义图片
tag	自定义图片角标
tags	自定义描述下方标签区域
footer	自定义右下角内容

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
--van-card-padding	var(--van-padding-xs) var(--van-padding-md)	-
--van-card-font-size	var(--van-font-size-sm)	-
--van-card-text-color	var(--van-text-color)	-
--van-card-background-color	var(--van-background-color-light)	-
--van-card-thumb-size	88px	-
--van-card-thumb-border-radius	var(--van-border-radius-lg)	-
--van-card-title-line-height	16px	-
--van-card-desc-color	var(--van-gray-7)	-
--van-card-desc-line-height	var(--van-line-height-md)	-
--van-card-price-color	var(--van-gray-8)	-
--van-card-origin-price-color	var(--van-gray-6)	-
--van-card-num-color	var(--van-gray-6)	-
--van-card-origin-price-font-size	var(--van-font-size-xs)	-
--van-card-price-font-size	var(--van-font-size-sm)	-
--van-card-price-integer-font-size	var(--van-font-size-lg)	-
--van-card-price-font-family	var(--van-price-integer-font-family)	-