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"
|
||||
>
|
||||
<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: {
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in New Issue