From f1c8a261e56acd81b8f591a79fe4f8882c6178cd Mon Sep 17 00:00:00 2001
From: liangmiao <45762508+lm312@users.noreply.github.com>
Date: Mon, 14 Nov 2022 16:18:46 +0800
Subject: [PATCH] Progress: add color prop (#22089)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* fix: issues #22065, el-progress添加底色，文字颜色的属性
---
 packages/progress/src/progress.vue | 16 ++++++++++++----
 packages/select/src/option.vue     | 23 +++++++++++++++++++++++
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/packages/progress/src/progress.vue b/packages/progress/src/progress.vue
index 182f310a8..d19976e59 100644
--- a/packages/progress/src/progress.vue
+++ b/packages/progress/src/progress.vue
@@ -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: {
diff --git a/packages/select/src/option.vue b/packages/select/src/option.vue
index a343b5b94..36ad58e61 100644
--- a/packages/select/src/option.vue
+++ b/packages/select/src/option.vue
@@ -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() {