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

前言

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

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

实现过程

先看效果

【vue自定义组件】渐变色进度条组件_第1张图片

实现原理

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

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

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

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

【vue自定义组件】渐变色进度条组件_第2张图片 【vue自定义组件】渐变色进度条组件_第3张图片

Vue中设置样式,样式穿透

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

1. >>>

常态下,如果Vuestyle中就是普通的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的相关知识,提升工作效率。
【vue自定义组件】渐变色进度条组件_第4张图片
【vue自定义组件】渐变色进度条组件_第5张图片
【vue自定义组件】渐变色进度条组件_第6张图片
【vue自定义组件】渐变色进度条组件_第7张图片

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

你可能感兴趣的