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

View File

@ -37,6 +37,10 @@
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
},
selectedColor: {
type: String,
default: '#409EFF'
} }
}, },
@ -131,6 +135,24 @@
selectOptionClick() { selectOptionClick() {
if (this.disabled !== true && this.groupDisabled !== true) { if (this.disabled !== true && this.groupDisabled !== true) {
this.dispatch('ElSelect', 'handleOptionClick', [this, 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('queryChange', this.queryChange);
this.$on('handleGroupDisabled', this.handleGroupDisabled); this.$on('handleGroupDisabled', this.handleGroupDisabled);
}, },
beforeDestroy() { beforeDestroy() {