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>...</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
的方式合併用戶配置跟默認值, 也就是說, 你不必傳所有的配置,沒有傳的會採用默認值
邊框虛線數組 和 分割線虛線數組 有不明白的, 可以參考 MDN:SGV的stroke-dasharray屬性
兼容
v-coupon 的核心內容是 SVG 的 foreignObject
, 具體的兼容請參考 Can I Use
其他
有任何 bug, 需求, 意見, 建議, 吐槽, 歡迎走issue 通道, 同時也歡迎 pr.