摘要:一款基于的卡券组件介绍你是否在心里暗骂设计师设计出这种有缺口的卡券你是否试了多种方案都无法完美实现你是否在为不得不用等格式而内心挣扎就是为了解决以上痛点而诞生的。
v-coupon 一款基于 vue 的卡券组件 介绍
你是否在心里暗骂设计师设计出这种有缺口的卡券?
你是否试了多种 CSS 方案都无法完美实现?
你是否在为不得不用 jpg/png...等格式而内心挣扎?
v-coupon 就是为了解决以上痛点而诞生的。
先看看效果
如果上图你有看到白色背景,那不是 bug, 是我截图的时候页面的背景就是白色的使用
安装
npm i v-coupon
在你的 vue 入口文件注册
import coupon from "v-coupon" Vue.use(coupon)
在需要展示卡券的页面使用
你要展示的内容
当然,你也许不需要全局引入,可以直接在需要使用的页面注册 v-coupon/src/coupon.vue 组件
import vCoupon from "v-coupon/src/coupon.vue" // ...省略其他无关代码 components: { "v-coupon": vCoupon }详细说明
第一个 div 的内容,会正常显示第二个 div 的内容,不会显示出来
配置, 上例的 yourConfig 就是我们要传给 v-coupon 的配置,具体的配置项如下
{ width: 200, // 卡券宽度 height: 300, // 卡券高度 borderRadius: 15, // 卡券四个角的圆角半径 borderColor: "#33cc44", // 边框颜色 borderWidth: 0.5, // 边框粗细 borderOpcity: 1, // 边框透明度 borderDash: null, // 边框虚线数组, 直线是 null, 虚线的话给一个数组,如[2,2] showLine: true, // 是否显示分割线 lineColor: "#33cc44", // 分割线颜色 lineWidth: 0.4, // 分割线粗细 lineOpcity: 1, // 分割线透明度 lineDash: [3, 5], // 分割线虚线数组, 同 边框虚线数组 lineOffset: 5, // 分割线跟卡券两侧的距离, 为 0 则相连 cutPosition: 200, // 裁切口的位置 cutRadius: 10, // 裁切口的半径 cutSlope: 1.5, // 裁切口的弧度 background: "#ffffff" // 背景颜色, 优先级低于 slot 的背景 }
以上单位, 除了裁切口弧度 cutSlope 外,其他数值的单位均为 px, 暂未对其他单位做支持.上面的配置的值, 其实就是 v-coupon 的默认值, 采用 Object.assign 的方式合并用户配置跟默认值, 也就是说, 你不必传所有的配置,没有传的会采用默认值
边框虚线数组 和 分割线虚线数组 有不明白的, 可以参考 MDN:SGV的stroke-dasharray属性
兼容v-coupon 的核心内容是 SVG 的 foreignObject, 具体的兼容请参考 Can I Use
其他v-coupon 的 github地址
有任何 bug, 需求, 意见, 建议, 吐槽, 欢迎走issue 通道, 同时也欢迎 pr.
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54705.html
摘要:一款基于的卡券组件介绍你是否在心里暗骂设计师设计出这种有缺口的卡券你是否试了多种方案都无法完美实现你是否在为不得不用等格式而内心挣扎就是为了解决以上痛点而诞生的。 v-coupon 一款基于 vue 的卡券组件 介绍 你是否在心里暗骂设计师设计出这种有缺口的卡券? 你是否试了多种 CSS 方案都无法完美实现? 你是否在为不得不用 jpg/png...等格式而内心挣扎? v-coupon...
摘要:一款基于的卡券组件介绍你是否在心里暗骂设计师设计出这种有缺口的卡券你是否试了多种方案都无法完美实现你是否在为不得不用等格式而内心挣扎就是为了解决以上痛点而诞生的。 v-coupon 一款基于 vue 的卡券组件 介绍 你是否在心里暗骂设计师设计出这种有缺口的卡券? 你是否试了多种 CSS 方案都无法完美实现? 你是否在为不得不用 jpg/png...等格式而内心挣扎? v-coupon...
平日学习接触过的网站积累,以每月的形式发布。2017年以前看这个网址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码 十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用 扩展JavaScript语法记录 - 掉坑初期工具 汉字拼音转换...
平日学习接触过的网站积累,以每月的形式发布。2017年以前看这个网址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二维码 十大经典排序算法(带动图演示) 为什么知乎前端圈普遍认为H5游戏和H5展示的JSer 个人整理和封装的YU.js库|中文详细注释|供新手学习使用 扩展JavaScript语法记录 - 掉坑初期工具 汉字拼音转换...
阅读 2505·2023-04-26 00:57
阅读 867·2021-11-25 09:43
阅读 2174·2021-11-11 16:55
阅读 2128·2019-08-30 15:53
阅读 3524·2019-08-30 15:52
阅读 1406·2019-08-30 14:10
阅读 3309·2019-08-30 13:22
阅读 1177·2019-08-29 11:18