更新记录
1.7.3(2021-11-25) 下载此版本
更新了失效后的样式,并且对按钮点击功能做了判断,已失效的优惠券点击时会提示已失效,并且不会触发领取功能
1.7.2(2021-10-22) 下载此版本
新增了一些属性,可以动态的修改自己想要的样式,更加自由灵活
1.7.1(2021-09-09) 下载此版本
内部代码重写,更加简洁,只保留了核心的样式,取消了乱七八槽的功能
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
× | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
前言
你们的使用、评论与收藏,是我更新组件的动力。同时我会尽量保证代码的简洁性,让你们能读懂源码,希望我的组件源码,能给到你们一些学习上的帮助,谢谢
有问题,或者想和我讨论一下小程序的一些问题,可以添加我的qq(1113237401)好友哦。感谢阅读
使用
引入
<lgf-coupon></lgf-coupon>
lgf-coupon属性
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
coupons | 优惠券的数据,可以设置优惠券价格,优惠券名称,优惠券的介绍描述,优惠券的有效期,下面有详细介绍 | Array | - |
color | 优惠券左右两个半圆的背景色,需要根据自己页面的背景色经行调整 | String | #f3f3f4 |
discountColor | 折扣金额的字体颜色 | String | #f52443 |
expireColor | 有效期的背景色 | String | #f5dfde |
btnColor | 按钮的颜色 | String | #e6005c |
coupons数据示例
<lgf-coupon :coupons="coupons"></lgf-coupon>
coupons:{
type:Array,
default:[
{
couponName:'无门槛优惠券',
expire:'2020-12-12 12:12:00至2020-12-12 12:12:00',
discount:15,
limit:'仅限于xxx使用',
btn:'领取',
state:null
},{
couponName:'无门槛优惠券',
expire:'今日到期',
discount:15,
limit:'仅限于xxx使用',
btn:'领取',
state:"expired"
},{
couponName:'无门槛优惠券',
expire:'今日到期',
discount:15,
limit:'仅限于xxx使用',
btn:'去使用',
state:"used"
}]
}
coupons属性描述
属性 | 作用 | 类型 | 可选值 |
---|---|---|---|
couponName | 优惠券的名称:无门槛优惠券、王者优惠券…… | String | |
expire | 有效期 | String | |
discount | 折扣金额 | Number | |
limit | 优惠券的限制:只能用于交电话费,物业费…… | String | |
btn | 按钮文字:领取,使用…… | String | |
state | 优惠券的状态:已失效 | String | expired |
事件
getCoupon
领取优惠券时使用
<lgf-coupon @getCoupon="getCoupon"></lgf-coupon>
getCoupon(item){
//这是点击领取优惠券时触发的事件
}