Vant Card 卡片

引入

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

Vue.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"
>
  <div slot="tags">
    <van-tag plain type="danger">标签</van-tag>
    <van-tag plain type="danger">标签</van-tag>
  </div>
  <div slot="footer">
    <van-button size="mini">按钮</van-button>
    <van-button size="mini">按钮</van-button>
  </div>
</van-card>

API

Props

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

Events

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

Slots

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

实例演示

作者:冒牌SEO,如若转载,请注明出处:https://www.web176.com/vant/15484.html

(0)
打赏 支付宝 支付宝 微信 微信
冒牌SEO冒牌SEO
上一篇 2023年4月14日
下一篇 2023年4月14日

相关推荐

发表回复

登录后才能评论