业务场景需要一个边框组件 三角边框和一个角为圆弧的组件
- 谷歌了一番 最多的是 四个角为直角 但是业务需求是三个角为直角和一个角为弧形 其余的时候为四个角直角
- 最终实现:
3.经过N次修改改成的
方案思路
- 一开始看网络上的 发现大部分都是用背景渐变完成的 不行 因为弧形的边框背景渐变无法完成.
- 开始使用伪类来解决问题 弧形用图片解决 不行 因为项目是大屏一旦放到大屏上图片弧形的就会出现像素模糊再加上切图困难 放弃
- 没办法 只能用 div 解决 弧形就用 border-radius 来解决问题
具体解决
- 只能用div做的话 一下子变得简单起来了
- 首先我们先做一个div边框作为为外层的边框
- 在做四个作为角的边框
- 对着四个角用相对路径进行定位
- 需要less的calc()方法进行精确计算
- 用props进行传值
- 用sloit作为内容插槽
需要参数和参数作用
- arc: border-radius 边框弯曲弧度 比如你是右下角弯曲就传值 '0 0 20px 0'
- arcSrc： 共有 topLeft topRight bottomLeft bottomRight 这些参数 比如你是右下角弯曲就传值 'bottomRight'
- colors： 顾名思义这是边框颜色 因为 边框和四个角的颜色不同所以就需要连个颜色 比如内边框为#2d6c90 四角的边框颜色为#153a4f 你应该传值: ['#2d6c90','#153a4f']
完成
具体代码可以点击我的github地址 因为用的是css-model大家可以根据具体业务进行修改 难是不难 主要的是思路~~~
