小知识，大挑战！本文正在参与“ 程序员必备小知识 ”创作活动
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
前言
佛祖保佑， 永无bug。Hello 大家好！我是海的对岸！
当时UI给的原型图说要弄这个，看了一下，不难，那就弄下，现在把这个记录下来。
实现过程
先看效果
实现原理
总体思路就是这个组件根据传过来不同的值value，给这个值lavue设置一个相应的区间，在当前区间内展示相应的颜色
css控制颜色渐变用到了background-image属性，传送门
ps: 本组件是基于
element-ui的el-progress标签改造出来的，Vue引入element-ui，看这里，传送门
- 为了演示方便，我就设成，进度条有
3个状态，进行中，失败，完成，不同颜色对应不同的class样式，在style中进行设置。 - 传过来的不同的值
value，判断这个值value是不是在这个状态内，为了演示方便，我传value同时，我也加了一个status字段，表示这个value的状态。
Vue中设置样式，样式穿透
因为，我要修改element-ui原本的样式，这就引出了Vue中的样式穿透，样式穿透有以下3种方式
1. >>>
常态下，如果Vue的style中就是普通的css,那么则
<style lang="css" scoped>
.a >>> .b {
/* ... */
}
</style>
2. /deep/
但是，我们Vue用多了，会发现有时候在样式style这里，我们会用到scss，以后还可能会用到less，这样的预处理器，但是像scss等预处理器却无法解析>>>，所以我们使用下面的方式.
<style lang="scss" scoped>
.a{
/deep/ .b {
/* ... */
}
}
</style>
3. ::v-deep
但是经过本人踩坑，在vue-cli3编译时，/deep/的方式会报错或者警告。
此时我们可以使用第三种方式，切记必须是双冒号
<style lang="scss" scoped>
.a{
::v-deep .b {
/* ... */
}
}
</style>
因为本demo中使用的是scss，所以我们是::v-deep
完整代码
comGradientProgressBar.vue
<template>
<div class="progress">
<el-progress type="line" :percentage="obj.value" :class="showProgressColor">
{{obj.value}}
</el-progress>
</div>
</template>
<script>
export default {
props: {
obj: {
type: Object,
default() {
return {
value: 0,
status: '失败'
};
},
},
},
data() {
return {
showProgressColor: 'el-bg-inner-running',
}
},
mounted() {
this.changeStatus(this.obj.status); // 设置进度条渐变颜色
},
methods: {
changeStatus(val) {
if (val == '进行中') {
this.showProgressColor = 'el-bg-inner-running';
} else if (val == '失败') {
this.showProgressColor = 'el-bg-inner-error';
} else if (val == '完成') {
this.showProgressColor = 'el-bg-inner-done';
}
},
},
}
</script>
<style lang="scss" scoped>
.progress{
width: 500px;
height: 20px;
/* 这里的背景颜色设置是为了显著的看到效果，实际开发中，作为组件会放在一个容器中，这个容器会自带背景的，如果项目中涉及到主题颜色的切换，那么可以设置符合主题的颜色 */
/* background-color: rgba(3,22,37,.85); */
padding-left: 10px;
}
.progress ::v-deep.el-progress__text{
color: #fff;
font-size: 14px;
}
.progress ::v-deep.el-progress-bar__outer{
height: 12px!important;
border: 1px solid #78335f;
background-color:transparent;
}
/* 渐变进度条 */
/* 有时候涉及到自定义的样式比较多，而且相同的组件用的也多，那么可以在组件的样式前面加一个自定义的class类名。*/
/* 以进度条为例，我自定义组件下的进度条用到的element-ui的el-progress，我给它加了一个.progress的类名*/
/* 那么其他地方再用到element-ui的el-progress时，那么我给其他地方的el-progress设置样式的时候，就不会影响到我现在的自定义进度条组件中的el-progress了 */
.progress ::v-deep .el-bg-inner-running .el-progress-bar__inner{
background-color: unset;
background-image: linear-gradient(to right, #3587d8 , #6855ff);
}
.progress ::v-deep .el-bg-inner-error .el-progress-bar__inner{
background-image: linear-gradient(to right, #3587d8 , #fb3a7e);
}
.progress ::v-deep .el-bg-inner-done .el-progress-bar__inner{
background-image: linear-gradient(to right, #3587d8 , #53ff54);
}
</style>
然后我们引用一下
<!--
* @Author: your name
* @Date: 2021-10-13 15:35:06
* @LastEditTime: 2021-10-29 09:48:53
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \hello-world\src\views\test\index.vue
-->
<template>
<div style="background-color: rgba(3,22,37,.85)">
<module v-for="(item, index) in dealList" :obj="item"/>
</div>
</template>
<script>
// 旋转展示数值组件
import module from './../../components/comGradientProgressBar'
export default {
name: 'test',
components: {
module,
},
data() {
return {
list: [
{id: '001', value: 49, status: '进行中' },
{id: '001', value: 68, status: '失败' },
{id: '001', value: 90, status: '完成' },
],
dealList: [],
}
},
methods: {
dealData() {
this.dealList = [];
// 这里要 处理list数据，将value都处理成100以内的数，防止进度条超过100，处理的步骤就不写了
// 这里就直接把list里的数据当处理好了，放到dealList中
this.dealList = this.list;
},
},
mounted() {
this.dealData();
},
}
</script>
<style scope>
</style>
评论抽奖
欢迎在评论区讨论，掘金官方将在掘力星计划活动结束后，在评论区抽送100份掘金周边
- 抽奖礼物：100份，掘金官方提供，包括掘金徽章、拖鞋、马克杯、帆布袋等，随机发放
- 抽奖时间：「掘力星计划」活动结束后，预计3个工作日内，官方将在所有符合规则的活动文章评论区抽出
- 抽奖方式：掘金官方随机抽奖+人工核实
- 评论内容：与文章内容相关的评论、建议、讨论等，「踩踩」「学习了」等泛泛类的评论无法获奖
都看到这里了，求各位观众大佬们点个赞再走吧，你的赞对我非常重要
