視覺完美 四角邊框（帶圓弧）組件 代碼編寫和分享 Vue.js

業務場景須要一個邊框組件 三角邊框和一個角爲圓弧的組件

1. 谷歌了一番 最多的是 四個角爲直角 可是業務需求是三個角爲直角和一個角爲弧形 其他的時候爲四個角直角
2. 最終實現:

   

3.通過N次修改改爲的

方案思路

1. 一開始看網絡上的 發現大部分都是用背景漸變完成的 不行 由於弧形的邊框背景漸變沒法完成.
2. 開始使用僞類來解決問題 弧形用圖片解決 不行 由於項目是大屏一旦放到大屏上圖片弧形的就會出現像素模糊再加上切圖困難 放棄
3. 沒辦法 只能用 div 解決 弧形就用 border-radius 來解決問題

具體解決

1. 只能用div作的話 一會兒變得簡單起來了
2. 首先咱們先作一個div邊框做爲爲外層的邊框
3. 在作四個做爲角的邊框
4. 對着四個角用相對路徑進行定位
5. 須要less的calc()方法進行精確計算
6. 用props進行傳值
7. 用sloit做爲內容插槽

須要參數和參數做用

1. arc: border-radius 邊框彎曲弧度 好比你是右下角彎曲就傳值 '0 0 20px 0'
2. arcSrc： 共有 topLeft topRight bottomLeft bottomRight 這些參數 好比你是右下角彎曲就傳值 'bottomRight'
3. colors： 顧名思義這是邊框顏色 由於 邊框和四個角的顏色不一樣因此就須要連個顏色 好比內邊框爲#2d6c90 四角的邊框顏色爲#153a4f 你應該傳值: ['#2d6c90','#153a4f']

完成

具體代碼能夠點擊個人github地址 由於用的是css-model你們能夠根據具體業務進行修改 難是不難 主要的是思路~~~

github地址點擊