From 58b60e52dc8a9c02c4a6fa707757037422ddc7ad Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Fri, 21 Jun 2024 12:44:55 +0800
Subject: [PATCH] fix(components): [progress] setting both color and striped is
 invalid (#17235)

* fix(components): [progress] setting both color and striped is invalid

* chore: fix test
---
 .../progress/__tests__/progress.test.tsx       | 10 +++++-----
 packages/components/progress/src/progress.vue  | 18 +++++++++++++-----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/components/progress/__tests__/progress.test.tsx b/packages/components/progress/__tests__/progress.test.tsx
index 92adc0336a..f2121ce9c1 100644
--- a/packages/components/progress/__tests__/progress.test.tsx
+++ b/packages/components/progress/__tests__/progress.test.tsx
@@ -67,7 +67,7 @@ describe('Progress.vue', () => {
 
     expect(
       wrapper.find('.el-progress-bar__inner').attributes('style')
-    ).toContain('background: rgb(255, 255, 255);')
+    ).toContain('background-color: rgb(255, 255, 255);')
   })
 
   test('striped', () => {
@@ -103,7 +103,7 @@ describe('Progress.vue', () => {
 
     expect(
       wrapper.find('.el-progress-bar__inner').attributes('style')
-    ).toContain('background: rgb(1, 2, 3);')
+    ).toContain('background-color: rgb(1, 2, 3);')
 
     percentage.value = 60
 
@@ -111,7 +111,7 @@ describe('Progress.vue', () => {
 
     expect(
       wrapper.find('.el-progress-bar__inner').attributes('style')
-    ).toContain('background: rgb(4, 5, 6);')
+    ).toContain('background-color: rgb(4, 5, 6);')
   })
 
   test('color is array', async () => {
@@ -131,14 +131,14 @@ describe('Progress.vue', () => {
 
     expect(
       wrapper.find('.el-progress-bar__inner').attributes('style')
-    ).toContain('background: rgb(1, 1, 1);')
+    ).toContain('background-color: rgb(1, 1, 1);')
 
     percentage.value = 89
     await nextTick()
 
     expect(
       wrapper.find('.el-progress-bar__inner').attributes('style')
-    ).toContain('background: rgb(9, 9, 9);')
+    ).toContain('background-color: rgb(9, 9, 9);')
   })
 
   test('format', () => {
diff --git a/packages/components/progress/src/progress.vue b/packages/components/progress/src/progress.vue
index 9ddb94a2e2..a67e7ef5cd 100644
--- a/packages/components/progress/src/progress.vue
+++ b/packages/components/progress/src/progress.vue
@@ -112,11 +112,19 @@ const props = defineProps(progressProps)
 
 const ns = useNamespace('progress')
 
-const barStyle = computed<CSSProperties>(() => ({
-  width: `${props.percentage}%`,
-  animationDuration: `${props.duration}s`,
-  background: getCurrentColor(props.percentage),
-}))
+const barStyle = computed<CSSProperties>(() => {
+  const barStyle: CSSProperties = {
+    width: `${props.percentage}%`,
+    animationDuration: `${props.duration}s`,
+  }
+  const color = getCurrentColor(props.percentage)
+  if (color.includes('gradient')) {
+    barStyle.background = color
+  } else {
+    barStyle.backgroundColor = color
+  }
+  return barStyle
+})
 
 const relativeStrokeWidth = computed(() =>
   ((props.strokeWidth / props.width) * 100).toFixed(1)