Steps: add status prop, close ElemeFE#3722 (ElemeFE#3724)

linsywu · Mar 28, 2017 · 1a481f5 · 1a481f5
1 parent 01d7473
commit 1a481f5
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/examples/docs/en-US/steps.md b/examples/docs/en-US/steps.md
@@ -128,6 +128,7 @@ Vertical step bars.
 | title | step title | string | — | — |
 | description | step description | string | — | — |
 | icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use  custom icons | string | — |
+| status | current status. It will be automatically set by Steps if not configured. | wait/process/finish/error/success | - |
 
 ### Step Slot
 | Name | Description |

diff --git a/examples/docs/zh-CN/steps.md b/examples/docs/zh-CN/steps.md
@@ -122,6 +122,7 @@
 | title | 标题 | string | — | — |
 | description | 描述性文字 | string | — | — |
 | icon | 图标 | Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入 | string | — |
+| status | 设置当前步骤的状态，不设置则根据 steps 确定状态 | wait/process/finish/error/success | - |
 
 ### Step Slot
 | name | 说明  |

diff --git a/packages/steps/src/step.vue b/packages/steps/src/step.vue
@@ -52,10 +52,7 @@ export default {
     title: String,
     icon: String,
     description: String,
-    status: {
-      type: String,
-      default: 'wait'
-    }
+    status: String
   },
 
   data() {
@@ -65,27 +62,33 @@ export default {
       lineStyle: {},
       mainOffset: 0,
       isLast: false,
-      currentStatus: this.status
+      internalStatus: ''
     };
   },
 
   beforeCreate() {
     this.$parent.steps.push(this);
   },
 
+  computed: {
+    currentStatus() {
+      return this.status || this.internalStatus;
+    }
+  },
+
   methods: {
     updateStatus(val) {
       const prevChild = this.$parent.$children[this.index - 1];
 
       if (val > this.index) {
-        this.currentStatus = this.$parent.finishStatus;
+        this.internalStatus = this.$parent.finishStatus;
       } else if (val === this.index) {
-        this.currentStatus = this.$parent.processStatus;
+        this.internalStatus = this.$parent.processStatus;
       } else {
-        this.currentStatus = 'wait';
+        this.internalStatus = 'wait';
       }
 
-      if (prevChild) prevChild.calcProgress(this.currentStatus);
+      if (prevChild) prevChild.calcProgress(this.internalStatus);
     },
 
     calcProgress(status) {
@@ -100,6 +103,7 @@ export default {
         style.transitionDelay = (-150 * this.index) + 'ms';
       }
 
+      style.borderWidth = step ? '1px' : 0;
       this.$parent.direction === 'vertical'
         ? style.height = step + '%'
         : style.width = step + '%';