Progress: add color prop (#22089)

* el-select添加selected选中颜色配置

* fix: issues #22065, el-progress添加底色,文字颜色的属性
pull/22176/head
liangmiao 2022-11-14 16:18:46 +08:00 committed by GitHub
parent bd56221e82
commit f1c8a261e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 4 deletions

View File

@ -15,9 +15,9 @@
aria-valuemax="100"
>
<div class="el-progress-bar" v-if="type === 'line'">
<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
<div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px', backgroundColor:defineBackColor}">
<div class="el-progress-bar__inner" :style="barStyle">
<div class="el-progress-bar__innerText" v-if="showText && textInside">{{content}}</div>
<div class="el-progress-bar__innerText" :style="{color:textColor}" v-if="showText && textInside">{{content}}</div>
</div>
</div>
</div>
@ -26,7 +26,7 @@
<path
class="el-progress-circle__track"
:d="trackPath"
stroke="#e5e9f2"
:stroke="defineBackColor"
:stroke-width="relativeStrokeWidth"
fill="none"
:style="trailPathStyle"></path>
@ -43,7 +43,7 @@
<div
class="el-progress__text"
v-if="showText && !textInside"
:style="{fontSize: progressTextSize + 'px'}"
:style="{fontSize: progressTextSize + 'px', color:textColor}"
>
<template v-if="!status">{{content}}</template>
<i v-else :class="iconClass"></i>
@ -93,6 +93,14 @@
type: [String, Array, Function],
default: ''
},
defineBackColor: {
type: [String, Array, Function],
default: '#ebeef5'
},
textColor: {
type: [String, Array, Function],
default: '#606266'
},
format: Function
},
computed: {

View File

@ -37,6 +37,10 @@
disabled: {
type: Boolean,
default: false
},
selectedColor: {
type: String,
default: '#409EFF'
}
},
@ -131,6 +135,24 @@
selectOptionClick() {
if (this.disabled !== true && this.groupDisabled !== true) {
this.dispatch('ElSelect', 'handleOptionClick', [this, true]);
if (this.selectedColor !== '#409EFF') {
//
if (this.$el.className === 'el-select-dropdown__item selected hover' ||
this.$el.className === 'el-select-dropdown__item hover'
) {
let siblingsNode = this.$parent.$children;
siblingsNode.forEach(item=>{
if (item.$el.className === 'el-select-dropdown__item' ||
item.$el.className === 'el-select-dropdown__item selected') {
item.$el.style.color = '#606266';
}
});
this.$el.style.color = this.selectedColor;
} else {
this.$el.style.color = '#606266';
}
}
}
},
@ -150,6 +172,7 @@
this.$on('queryChange', this.queryChange);
this.$on('handleGroupDisabled', this.handleGroupDisabled);
},
beforeDestroy() {