今天遇到一个element进度条样式问题:将进度条的颜色设置为渐变色。
效果图如下:
查看element官方文档得知,ele官方提供的color方法支持单色显示
考虑到CSS中 background-image属性可以提供颜色渐变,在网页F12中直接调试后发现该方法可行:
linear-gradient
1.基本用法:
background-image:linear-gradient(red, yellow, blue, green);
background-image:linear-gradient(rgba(255,0,0,.2), yellow, blue, green);
2.控制颜色渐变的方向:
/*0deg= to top-- 从下到上*/
background-image: linear-gradient(0deg, red, yellow, blue, green);
/*基于0度顺时针旋转45deg*/
background-image: linear-gradient(45deg, red, yellow, blue, green);
/*基于0度逆时针旋转45deg*/
background-image: linear-gradient(-45deg, red, yellow, blue, green);
3.控制颜色渐变的方向(to):
/*从过渡起始位置50px开始让红色和黄色之间产生颜色渐变效果,方向为右*/
/*向左同理*/
background-image:linear-gradient(to right, red50px, yellow, blue, green);
background-image:linear-gradient(to right, red50px, yellow50px, blue, green);
background-image:linear-gradient(to right, red50px, yellow50px, yellow100px, blue, green);
我的思路是用css类选择器直接选择element动态生成的div,然后设置background-image:linear-gradient(),但是在调试中发现这样写不生效,询问同事得知,ele样式在scoped中更改时无效的,但是删掉scoped的话会影响到全局的样式:
卡在这里一会后,我不出意外地又去求助度娘了,查询后得到了修改ele动态生成的元素样式的方法,实现代码如下:
很简单吧?这里需要注意的有两点,首先是重新写一个style的时候需要删掉scoped属性,其次要找一个我们准备修改样式的类名的父元素,然后书写就可以了。
还有另一种方法更加简单,虽然我没尝试,但是还是写出来吧,小伙伴们有兴趣可以试一下:
/deep/;.personCharts为我们要修改组件类名的父级组件样式类名。