【vue自定义组件】渐变色进度条组件

前言

佛祖保佑， 永无bug。Hello 大家好！我是海的对岸！

当时UI给的原型图说要弄这个，看了一下，不难，那就弄下，现在把这个记录下来。

实现过程

先看效果

实现原理

总体思路就是这个组件根据传过来不同的值value，给这个值lavue设置一个相应的区间，在当前区间内展示相应的颜色

css控制颜色渐变用到了background-image属性，传送门

ps: 本组件是基于element-ui的el-progress标签改造出来的，Vue引入element-ui，看这里，传送门

1.为了演示方便，我就设成，进度条有3个状态，进行中，失败，完成，不同颜色对应不同的class样式，在style中进行设置。
2.传过来的不同的值value，判断这个值value是不是在这个状态内，为了演示方便，我传value同时，我也加了一个status字段，表示这个value的状态。

Vue中设置样式，样式穿透

因为，我要修改element-ui原本的样式，这就引出了Vue中的样式穿透，样式穿透有以下3种方式

1. >>>

常态下，如果Vue的style中就是普通的css,那么则

2. /deep/

但是，我们Vue用多了，会发现有时候在样式style这里，我们会用到scss，以后还可能会用到less，这样的预处理器，但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.

3. ::v-deep

但是经过本人踩坑，在vue-cli3编译时，/deep/的方式会报错或者警告。此时我们可以使用第三种方式，切记必须是双冒号

因为本demo中使用的是scss，所以我们是::v-deep

完整代码

comGradientProgressBar.vue

然后我们引用一下

评论抽奖

欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边

• 抽奖礼物：100份，掘金官方提供，包括掘金徽章、拖鞋、马克杯、帆布袋等，随机发放
• 抽奖时间：「掘力星计划」活动结束后，预计3个工作日内，官方将在所有符合规则的活动文章评论区抽出
• 抽奖方式：掘金官方随机抽奖+人工核实
• 评论内容：与文章内容相关的评论、建议、讨论等，「踩踩」「学习了」等泛泛类的评论无法获奖

都看到这里了，求各位观众大佬们点个赞再走吧，你的赞对我非常重要

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享