codecamp

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


Vant Area 省市区选择
Vant Contact 联系人
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }