当前位置: 首页 > Web前端 > HTML5

另一种凹风格的解决方案——v-coupon是一个基于vue的优惠券组件

时间:2023-04-05 23:30:48 HTML5

v-coupon引入了一个基于vue的优惠券组件。你是不是在暗骂设计师设计出这种有缝隙的优惠券?你是否尝试过多种CSS方案却无法完美实现?您是否为必须使用jpg/png...等格式而苦恼?v-coupon就是为解决以上痛点而诞生的。我们先来看看效果。如果您在上图中看到白色背景,那不是错误。我截图时页面的背景是白色的。使用npmiv-coupon从你的vue入口文件中的'v-coupon注册导入优惠券'Vue.use(coupon)使用你想要的内容在需要展示优惠券的页面展示

当然也可以不用全局导入,直接在页面注册v-coupon/src/coupon.vue组件即可你需要使用importvCouponfrom'v-coupon/src/coupon.vue'//...省略其他不相关的代码组件:{'v-coupon':vCoupon}详细说明...,也就是一个slot,也就是说这个v-coupon只提供一个裁剪模板,其他的内容你可以任意定制,给你最大的发挥空间,但同时,为了为了避免各种复杂的问题,只能有一个slot,下面代码的第二个div不会显示第一个div的内容会可以正常显示
第二个div的内容不会显示
配置,上面的例子yourConfig就是我们要传给v-coupon的配置,具体配置项如下{width:200,//优惠券的宽度height:300,//优惠券的高度borderRadius:15,//优惠券喇叭四个角的圆圈RadiusborderColor:'#33cc44',//边框颜色borderWidth:0.5,//边框粗细borderOpcity:1,//边框透明度borderDash:null,//边框虚线数组,直线为空,对于虚线,给出一个array,suchas[2,2]showLine:true,//是否显示分割线lineColor:'#33cc44',//分割线颜色lineWidth:0.4,//分割线粗细lineOpcity:1,//分割线transparencylineDash:[3,5],//分割线的虚线数组,与边框的虚线数组相同lineOffset:5,//分割线到优惠券两侧的距离,如果为0,则连接cutPosition:200,//裁剪位置cutRadius:10,//裁剪裁剪半径cutSlope:1.5,//裁剪背景弧度:'#ffffff'//背景色,优先级低于slot背景}及以上单位,除cutout的弧度cutSlope外,其他值的单位为px,暂不支持其他单位。上面配置的值其实就是v-coupon的默认值,通过Object.assign的方法将用户配置和默认值结合起来。也就是说,您不必通过所有配置。会使用默认的边框虚线数组和分割线虚线数组。不明白的可以参考MDN:SGV的stroke-dasharray属性兼容v-coupon的核心内容是SVG的foreignObject。具体兼容性可以参考CanIUseotherv-Coupon的github地址有什么BUG,需求,意见,建议,投诉,欢迎来到issue频道,也欢迎pr。