资讯专栏INFORMATION COLUMN

内凹样式的另一个方案--v-coupon 一款基于 vue 的卡券组件

shiweifu / 346人阅读

摘要:一款基于的卡券组件介绍你是否在心里暗骂设计师设计出这种有缺口的卡券你是否试了多种方案都无法完美实现你是否在为不得不用等格式而内心挣扎就是为了解决以上痛点而诞生的。

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
}
详细说明

... 之间包含的内容,是一个 slot, 这意味这 v-coupon 只提供一个裁切模版,其他内容你可以任意定制,给予你最大的发挥空间,但同时为了避免各种复杂的问题,只能有一个slot, 以下代码的第二个 div 不会被显示出来


  
第一个 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/117085.html

相关文章

  • 内凹样式的另一个方案--v-coupon 一款基于 vue 的卡组件

    v-coupon 一款基于 vue 的卡组件 介绍 你是否在心里暗骂设计师设计出这种有缺口的卡? 你是否试了多种 CSS 方案都无法完美实现? 你是否在为不得不用 jpg/png...等格式而内心挣扎? v-coupon 就是为了解决以上痛点而诞生的。...

    boredream 评论0 收藏0
  • 内凹样式的另一个方案--v-coupon 一款基于 vue 的卡组件

    v-coupon 一款基于 vue 的卡组件 介绍 你是否在心里暗骂设计师设计出这种有缺口的卡? 你是否试了多种 CSS 方案都无法完美实现? 你是否在为不得不用 jpg/png...等格式而内心挣扎? v-coupon 就是为了解决以上痛点而诞生的。...

    cpupro 评论0 收藏0
  • 内凹样式的另一个方案--v-coupon 一款基于 vue 的卡组件

    v-coupon 一款基于 vue 的卡组件 介绍 你是否在心里暗骂设计师设计出这种有缺口的卡? 你是否试了多种 CSS 方案都无法完美实现? 你是否在为不得不用 jpg/png...等格式而内心挣扎? v-coupon 就是为了解决以上痛点而诞生的。...

    BlackFlagBin 评论0 收藏0
  • 2017年2月份前端资源分享

    ...需要知道的一切 border、outline、boxshadow那些事以及如何做内凹圆 Responsive design 和 Adaptive design 的区别? 5. Angular General Solution For Angular2 Overlay Elements AngularJS 常见面试问题 Angular2.0视频教程来了!(视频链接在底部) An implementation...

    lily_wang 评论0 收藏0
  • 2017年2月份前端资源分享

    ...需要知道的一切 border、outline、boxshadow那些事以及如何做内凹圆 Responsive design 和 Adaptive design 的区别? 5. Angular General Solution For Angular2 Overlay Elements AngularJS 常见面试问题 Angular2.0视频教程来了!(视频链接在底部) An implementation...

    chengjianhua 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<