泽兴芝士网

引入

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

Vue.use(Card);

自定义内容

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左侧图片 URLstring-title标题string-desc描述string-tag图片角标string-num商品数量number | string-price商品价格number | string-origin-price商品划线原价number | string-centered内容是否垂直居中booleanfalsecurrency货币符号stringyenthumb-link点击左侧图片后跳转的链接地址string-lazy-load是否开启图片懒加载，须配合 Lazyload 组件使用booleanfalse

Events

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

Slots

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