举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > van-card Vant Card 卡片

van-card Vant Card 卡片

2023-05-08 07:18 Vant中文教程

van-card Vant Card 卡片

van-card Vant Card 卡片

van-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自定义右下角内容


实例演示

阅读全文
以上是编程学为你收集整理的van-card Vant Card 卡片全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部