JSRUN 用代码说话

Card 卡片

编辑教程

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 左侧图片 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: Event
click-thumb 点击自定义图片时触发 event: Event

Slots

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

实例

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟