Steps: add center property, resolve #2315

examples/docs/en-US/steps.md

@@ -120,6 +120,7 @@ Vertical step bars.
 | process-status | status of current step | string | wait/process/finish/error/success | process |
 | finish-status | status of end step | string | wait/process/finish/error/success | finish |
 | align-center | whether step description is centered | boolean | — | false |
+| center | center whole `Steps` component | boolean | false, true | false |
 
 ### Step Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/zh-CN/steps.md

@@ -114,6 +114,7 @@
 | process-status | 设置当前步骤的状态 | string | wait/process/finish/error/success | process |
 | finish-status | 设置结束步骤的状态 | string | wait/process/finish/error/success | finish |
 | align-center | 标题描述居中对齐 | boolean | false, true | false |
+| center | 组件居中显示 | boolean | false, true | false |
 
 ### Step Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |

packages/steps/src/step.vue

@@ -1,14 +1,15 @@
 <template>
   <div
     class="el-step"
-    :style="style"
+    :style="[style,  isLast ? '' : { marginRight: - $parent.stepOffset + 'px' }]"
     :class="['is-' + $parent.direction]">
     <div
       class="el-step__head"
       :class="['is-' + currentStatus, { 'is-text': !icon }]">
       <div
         class="el-step__line"
-        :class="['is-' + $parent.direction,{ 'is-icon': icon }]">
+        :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
+        :class="['is-' + $parent.direction, { 'is-icon': icon }]">
         <i class="el-step__line-inner" :style="lineStyle"></i>
       </div>
 
@@ -63,6 +64,7 @@ export default {
       style: {},
       lineStyle: {},
       mainOffset: 0,
+      isLast: false,
       currentStatus: this.status
     };
   },
@@ -103,22 +105,31 @@ export default {
         : style.width = step + '%';
 
       this.lineStyle = style;
+    },
+
+    adjustPosition() {
+      this.style = {};
+      this.$parent.stepOffset = this.$el.getBoundingClientRect().width / (this.$parent.steps.length - 1);
     }
   },
 
   mounted() {
     const parent = this.$parent;
+    const isCenter = parent.center;
+    const len = parent.steps.length;
+    const isLast = this.isLast = parent.steps[parent.steps.length - 1] === this;
     const space = parent.space
       ? parent.space + 'px'
-      : 100 / parent.steps.length + '%';
+      : 100 / (isCenter ? len - 1 : len) + '%';
 
     if (parent.direction === 'horizontal') {
       this.style = { width: space };
       if (parent.alignCenter) {
         this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
       }
+      isCenter && isLast && this.adjustPosition();
     } else {
-      if (parent.steps[parent.steps.length - 1] !== this) {
+      if (!isLast) {
         this.style = { height: space };
       }
     }

packages/steps/src/steps.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="el-steps" :class="['is-' + direction]"><slot></slot></div>
+  <div
+    class="el-steps"
+    :class="['is-' + direction, center ? 'is-center' : '']">
+    <slot></slot>
+  </div>
 </template>
 
 <script>
@@ -14,6 +18,7 @@ export default {
       default: 'horizontal'
     },
     alignCenter: Boolean,
+    center: Boolean,
     finishStatus: {
       type: String,
       default: 'finish'
@@ -26,7 +31,8 @@ export default {
 
   data() {
     return {
-      steps: []
+      steps: [],
+      stepOffset: 0
     };
   },
 

packages/theme-default/src/steps.css

@@ -11,6 +11,10 @@
 
     @when horizontal {
       white-space: nowrap;
+
+      @when center {
+        text-align: center;
+      }
     }
   }
 }