From 14530f37091dc83bc87ff24da2316a4afee616ad Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 7 May 2020 16:28:05 +0800
Subject: [PATCH] fix(Step): active-color should effect circle (#6229)

* fix(Step): active-color should effect circle

* chore: improve line style
---
 src/step/index.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/step/index.js b/src/step/index.js
index 0d942c72d..254b79ec6 100644
--- a/src/step/index.js
+++ b/src/step/index.js
@@ -21,6 +21,14 @@ export default createComponent({
     active() {
       return this.status === 'process';
     },
+
+    lineStyle() {
+      if (this.status === 'finish' && this.parent.activeColor) {
+        return {
+          background: this.parent.activeColor,
+        };
+      }
+    },
   },
 
   methods: {
@@ -47,7 +55,7 @@ export default createComponent({
         );
       }
 
-      return <i class={bem('circle')} />;
+      return <i class={bem('circle')} style={this.lineStyle} />;
     },
 
     onClickStep() {
@@ -60,7 +68,6 @@ export default createComponent({
     const { activeColor, direction } = this.parent;
 
     const titleStyle = active && { color: activeColor };
-    const lineStyle = status === 'finish' && { background: activeColor };
 
     return (
       <div class={[BORDER, bem([direction, { [status]: status }])]}>
@@ -74,7 +81,7 @@ export default createComponent({
         <div class={bem('circle-container')} onClick={this.onClickStep}>
           {this.genCircle()}
         </div>
-        <div class={bem('line')} style={lineStyle} />
+        <div class={bem('line')} style={this.lineStyle} />
       </div>
     );
   },