内凹样式的另一个方案－－v-coupon 一款基于 vue 的卡券组件
v-coupon 一款基于 vue 的卡券组件
介绍
你是否在心里暗骂设计师设计出这种有缺口的卡券？
你是否试了多种 CSS 方案都无法完美实现？
你是否在为不得不用 jpg/png…等格式而内心挣扎？
v-coupon 就是为了解决以上痛点而诞生的。
先看看效果
如果上图你有看到白色背景，那不是 bug, 是我截图的时候页面的背景就是白色的
使用
- 安装
npm i v-coupon
- 在你的 vue 入口文件注册
import coupon from 'v-coupon'
Vue.use(coupon)
- 在需要展示卡券的页面使用
<v-coupon config="yourConfig"><div class="content">你要展示的内容div>
v-coupon>
当然,你也许不需要全局引入，可以直接在需要使用的页面注册 v-coupon/src/coupon.vue 组件
import vCoupon from 'v-coupon/src/coupon.vue'// ...省略其他无关代码components: {'v-coupon': vCoupon
}详细说明
...
<v-coupon config="yourConfig"><div class="content">第一个 div 的内容，会正常显示div><div>第二个 div 的内容，不会显示出来div>
v-coupon>
- 配置, 上例的
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.
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！