Commit f1c8a261 authored by liangmiao's avatar liangmiao Committed by GitHub

Progress: add color prop (#22089)

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

* fix: issues #22065, el-progress添加底色,文字颜色的属性
parent bd56221e
...@@ -15,9 +15,9 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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 @@ ...@@ -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: {
......
...@@ -37,6 +37,10 @@ ...@@ -37,6 +37,10 @@
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
},
selectedColor: {
type: String,
default: '#409EFF'
} }
}, },
...@@ -131,6 +135,24 @@ ...@@ -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 @@ ...@@ -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() {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment