国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

內(nèi)凹樣式的另一個(gè)方案－－v-coupon 一款基于 vue 的卡券組件

shiweifu / 832人閱讀

摘要：一款基于的卡券組件介紹你是否在心里暗罵設(shè)計(jì)師設(shè)計(jì)出這種有缺口的卡券你是否試了多種方案都無法完美實(shí)現(xiàn)你是否在為不得不用等格式而內(nèi)心掙扎就是為了解決以上痛點(diǎn)而誕生的。

v-coupon 一款基于 vue 的卡券組件 介紹

你是否在心里暗罵設(shè)計(jì)師設(shè)計(jì)出這種有缺口的卡券？

你是否試了多種 CSS 方案都無法完美實(shí)現(xiàn)？

你是否在為不得不用 jpg/png...等格式而內(nèi)心掙扎？

v-coupon 就是為了解決以上痛點(diǎn)而誕生的。

先看看效果

如果上圖你有看到白色背景，那不是 bug, 是我截圖的時(shí)候頁面的背景就是白色的
使用

安裝

npm i v-coupon

在你的 vue 入口文件注冊

import coupon from "v-coupon"
Vue.use(coupon)

在需要展示卡券的頁面使用


  

    你要展示的內(nèi)容

當(dāng)然,你也許不需要全局引入，可以直接在需要使用的頁面注冊 v-coupon/src/coupon.vue 組件

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

// ...省略其他無關(guān)代碼

components: {
    "v-coupon": vCoupon
}
詳細(xì)說明

... 之間包含的內(nèi)容,是一個(gè) slot, 這意味這 v-coupon 只提供一個(gè)裁切模版,其他內(nèi)容你可以任意定制，給予你最大的發(fā)揮空間,但同時(shí)為了避免各種復(fù)雜的問題,只能有一個(gè)slot, 以下代碼的第二個(gè) div 不會(huì)被顯示出來


  

    第一個(gè) div 的內(nèi)容，會(huì)正常顯示
  


  

    第二個(gè) div 的內(nèi)容，不會(huì)顯示出來

配置, 上例的 yourConfig 就是我們要傳給 v-coupon 的配置，具體的配置項(xiàng)如下

{
    width: 200, // 卡券寬度
    height: 300, // 卡券高度
    borderRadius: 15, // 卡券四個(gè)角的圓角半徑
    borderColor: "#33cc44", // 邊框顏色
    borderWidth: 0.5, // 邊框粗細(xì)
    borderOpcity: 1, // 邊框透明度
    borderDash: null, // 邊框虛線數(shù)組, 直線是 null, 虛線的話給一個(gè)數(shù)組,如[2,2]
    showLine: true, // 是否顯示分割線
    lineColor: "#33cc44", // 分割線顏色
    lineWidth: 0.4, // 分割線粗細(xì)
    lineOpcity: 1, // 分割線透明度
    lineDash: [3, 5], // 分割線虛線數(shù)組, 同 邊框虛線數(shù)組
    lineOffset: 5, // 分割線跟卡券兩側(cè)的距離, 為 0 則相連
    cutPosition: 200, // 裁切口的位置
    cutRadius: 10, // 裁切口的半徑
    cutSlope: 1.5, // 裁切口的弧度
    background: "#ffffff" // 背景顏色, 優(yōu)先級低于 slot 的背景
}
以上單位, 除了裁切口弧度 cutSlope 外，其他數(shù)值的單位均為 px, 暫未對其他單位做支持.
上面的配置的值, 其實(shí)就是 v-coupon 的默認(rèn)值, 采用 Object.assign 的方式合并用戶配置跟默認(rèn)值, 也就是說, 你不必傳所有的配置，沒有傳的會(huì)采用默認(rèn)值

邊框虛線數(shù)組 和 分割線虛線數(shù)組 有不明白的, 可以參考 MDN:SGV的stroke-dasharray屬性

兼容

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

其他

v-coupon 的 github地址

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/117085.html

相關(guān)文章

  • 內(nèi)凹樣式的另一個(gè)方案－－v-coupon 一款基于 vue 的卡券組件

    摘要：一款基于的卡券組件介紹你是否在心里暗罵設(shè)計(jì)師設(shè)計(jì)出這種有缺口的卡券你是否試了多種方案都無法完美實(shí)現(xiàn)你是否在為不得不用等格式而內(nèi)心掙扎就是為了解決以上痛點(diǎn)而誕生的。 v-coupon 一款基于 vue 的卡券組件 介紹 你是否在心里暗罵設(shè)計(jì)師設(shè)計(jì)出這種有缺口的卡券？ 你是否試了多種 CSS 方案都無法完美實(shí)現(xiàn)？ 你是否在為不得不用 jpg/png...等格式而內(nèi)心掙扎？ v-coupon...

    boredream 評論0 收藏0

  • 內(nèi)凹樣式的另一個(gè)方案－－v-coupon 一款基于 vue 的卡券組件

    摘要：一款基于的卡券組件介紹你是否在心里暗罵設(shè)計(jì)師設(shè)計(jì)出這種有缺口的卡券你是否試了多種方案都無法完美實(shí)現(xiàn)你是否在為不得不用等格式而內(nèi)心掙扎就是為了解決以上痛點(diǎn)而誕生的。 v-coupon 一款基于 vue 的卡券組件 介紹 你是否在心里暗罵設(shè)計(jì)師設(shè)計(jì)出這種有缺口的卡券？ 你是否試了多種 CSS 方案都無法完美實(shí)現(xiàn)？ 你是否在為不得不用 jpg/png...等格式而內(nèi)心掙扎？ v-coupon...

    cpupro 評論0 收藏0

  • 2017年2月份前端資源分享

    平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...

    lily_wang 評論0 收藏0

  • 2017年2月份前端資源分享

    平日學(xué)習(xí)接觸過的網(wǎng)站積累，以每月的形式發(fā)布。2017年以前看這個(gè)網(wǎng)址：http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動(dòng)圖演示) 為什么知乎前端圈普遍認(rèn)為H5游戲和H5展示的JSer 個(gè)人整理和封裝的YU.js庫|中文詳細(xì)注釋|供新手學(xué)習(xí)使用 擴(kuò)展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...

    chengjianhua 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<