Merge pull request #2531 from QingWei-Li/fix/steps/space

Steps: space prop support percentage

examples/docs/en-US/steps.md

@@ -114,7 +114,7 @@ Vertical step bars.
 
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------- |---------- |-------------  |-------- |
-| space | the spacing of each step, will be responsive if omitted | Number | — | — |
+| space | the spacing of each step, will be responsive if omitted. Support percentage. | Number,String | — | — |
 | direction | display direction | string | vertical/horizontal | horizontal |
 | active | current activation step  | number | — | 0 |
 | process-status | status of current step | string | wait/process/finish/error/success | process |

examples/docs/zh-CN/steps.md

@@ -108,7 +108,7 @@
 
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| space | 每个 step 的间距，不填写将自适应间距 | Number | — | — |
+| space | 每个 step 的间距，不填写将自适应间距。支持百分比。 | Number,String | — | — |
 | direction | 显示方向 | string | vertical/horizontal | horizontal |
 | active | 设置当前激活步骤  | number | — | 0 |
 | process-status | 设置当前步骤的状态 | string | wait/process/finish/error/success | process |

packages/steps/src/step.vue

@@ -118,9 +118,11 @@ export default {
     const isCenter = parent.center;
     const len = parent.steps.length;
     const isLast = this.isLast = parent.steps[parent.steps.length - 1] === this;
-    const space = parent.space
+    const space = typeof parent.space === 'number'
       ? parent.space + 'px'
-      : 100 / (isCenter ? len - 1 : len) + '%';
+      : parent.space
+        ? parent.space
+        : 100 / (isCenter ? len - 1 : len) + '%';
 
     if (parent.direction === 'horizontal') {
       this.style = { width: space };

packages/steps/src/steps.vue

@@ -11,7 +11,7 @@ export default {
   name: 'ElSteps',
 
   props: {
-    space: Number,
+    space: [Number, String],
     active: Number,
     direction: {
       type: String,