视觉完美 四角边框（带圆弧）组件 代码编写和分享 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地址点击