mirror of https://github.com/ElemeFE/element
Progress: add color prop (#22089)
* el-select添加selected选中颜色配置 * fix: issues #22065, el-progress添加底色,文字颜色的属性pull/22176/head
parent
bd56221e82
commit
f1c8a261e5
|
@ -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: {
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
Loading…
Reference in New Issue