奔三路 - 你30岁前的学习路!

奔三路学习网

当前位置: 主页 > vue面试通 > 开源框架 >

Vant--有赞移动端 Vue 组件库

时间:2018-03-01 14:21来源:未知 作者:admin
特性 48+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的文档和示例 支持 babel-plugin-import 支持 TypeScript 支持 SSR 组件 基础组件 Layout 布局 Badge 徽章 Button 按钮 Cell 单元格

特性

  • 48+ 个经过有赞线上业务检验的组件
  • 单元测试覆盖率超过 90%
  • 完善的文档和示例
  • 支持 babel-plugin-import
  • 支持 TypeScript
  • 支持 SSR

组件
基础组件
表单
操作反馈
高阶组件
业务组件
  • AddressEdit 地址编辑
  • AddressList 地址列表
  • Area 省市区选择
  • Card 卡片
  • Contact 联系人
  • Coupon 优惠券选择器
  • Coupon 优惠券选择器

    使用指南

    import { CouponCell, CouponList } from 'vant';
    
    Vue.use(CouponCell).use(CouponList);
    

    代码演示

    基础用法

    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
    
    <!-- 优惠券列表 -->
    <van-popup v-model="showList" position="bottom">
      <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
    
    const coupon = {
      available: 1,
      discount: 0,
      denominations: 150,
      origin_condition: 0,
      reason: '',
      value: 150,
      name: '优惠券名称',
      start_at: 1489104000,
      end_at: 1514592000
    };
    
    export default {
      data() {
        return {
          chosenCoupon: -1,
          coupons: [coupon],
          disabledCoupons: [coupon]
        }
      },
    
      methods: {
        onChange(index) {
          this.showList = false;
          this.chosenCoupon = index;
        },
        onExchange(code) {
          this.coupons.push(coupon);
        }
      }
    }
    

    CouponCell API

    参数 说明 类型 默认值 可选值
    title 单元格标题 String 优惠券码 -
    chosen-coupon 当前选中优惠券的索引 Number -1 -
    coupons 可用优惠券列表 Array [] -
    editable 能否切换优惠券 Boolean true -

    CouponList API

    参数 说明 类型 默认值 可选值
    v-model 当前输入的兑换码 String - -
    chosen-coupon 当前选中优惠券的索引 Number -1 -
    coupons 可用优惠券列表 Array [] -
    disabled-doupons 不可用优惠券列表 Array [] -
    exchange-button-text 兑换按钮文字 String 兑换 -
    exchange-button-loading 是否在兑换按钮上显示加载动画 Boolean false -
    exchange-button-disabled 是否禁用兑换按钮 Boolean false -
    exchange-min-length 兑换码最小长度 Number 1 -
    displayed-coupon-index 滚动至特定优惠券位置 Number - -
    show-close-button 是否显示列表底部按钮 Boolean true -
    close-button-text 列表底部按钮文字 String 不使用优惠 -
    disabled-list-title 不可用券列表标题 String 不可用优惠 -
    input-placeholder 输入框文字提示 String 请输入优惠码 -
    show-exchange-bar 是否展示兑换栏 Boolean true -

    CouponList Event

    事件名 说明 参数
    change 优惠券切换回调 index, 选中优惠券的索引
    exchange 兑换优惠券回调 code, 兑换码

    数据格式

    优惠券字段说明

    key 说明 类型
    id 优惠券 id String
    name 优惠券名称 String
    discount 折扣(0为满减券)88=>8.8折 Number
    denominations 面值(0为折扣券)单位分 Number
    origin_condition 满减条件(0为无门槛,满XX元可用)单位分 Number
    start_at 卡有效开始时间 (时间戳, 单位秒) Number
    end_at 卡失效日期 (时间戳, 单位秒) Number
    reason 不可用原因 String
    value 订单优惠金额,单位分 Number
  • GoodsAction 商品页行动点
  • SubmitBar 提交订单栏
  • Sku 商品规格弹层

(责任编辑:admin)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
发布者资料
史密斯 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2017-11-24 11:11 最后登录:2018-09-02 11:09

关注奔三路