內凹樣式的另外一個方案－－v-coupon 一款基於 vue 的卡券組件

v-coupon 一款基於 vue 的卡券組件

介紹

你是否在內心暗罵設計師設計出這種有缺口的卡券？javascript

你是否試了多種 CSS 方案都沒法完美實現？html

你是否在爲不得不用 jpg/png...等格式而心裏掙扎？vue

v-coupon 就是爲了解決以上痛點而誕生的。java

先看看效果git

若是上圖你有看到白色背景，那不是 bug, 是我截圖的時候頁面的背景就是白色的github

使用

安裝

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 組件npm

import vCoupon from 'v-coupon/src/coupon.vue'

// ...省略其餘無關代碼

components: {
    'v-coupon': vCoupon
}

複製代碼

詳細說明

<v-coupon>...</v-coupon> 之間包含的內容,是一個 slot, 這意味這 v-coupon 只提供一個裁切模版,其餘內容你能夠任意定製，給予你最大的發揮空間,但同時爲了不各類複雜的問題,只能有一個slot, 如下代碼的第二個 div 不會被顯示出來

<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 的方式合併用戶配置跟默認值, 也就是說, 你沒必要傳全部的配置，沒有傳的會採用默認值bash

邊框虛線數組和分割線虛線數組有不明白的, 能夠參考 MDN:SGV的stroke-dasharray屬性markdown

兼容

v-coupon 的核心內容是 SVG 的 foreignObject, 具體的兼容請參考 Can I Use

其餘

v-coupon 的 github地址

有任何 bug, 需求, 意見, 建議, 吐槽, 歡迎走issue 通道, 同時也歡迎 pr.