Step: add align-center, fixed #994

examples/docs/en-US/steps.md

@@ -14,7 +14,7 @@
   }
 </script>
 
-## Steps 
+## Steps
 
 Step-by-step guide to guide the user to complete the task in accordance with the process. Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.
 
@@ -120,6 +120,7 @@ Vertical step bars.
 | active | Sets the current activation step  | number | — | 0 |
 | process-status | Sets the status of current step | string | wait/process/finish/error/success | process |
 | finish-status | Sets the status of end step | string | wait/process/finish/error/success | finish |
+| align-center | align center | boolean | false, true | false |
 
 ### Step Attributes
 | Attribute      | Description    | Type      | Options       | Default   |

examples/docs/zh-CN/steps.md

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

packages/steps/src/step.vue

@@ -114,7 +114,9 @@ export default {
 
     if (parent.direction === 'horizontal') {
       this.style = { width: space };
-      // this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
+      if (parent.alignCenter) {
+        this.mainOffset = -this.$refs.title.getBoundingClientRect().width / 2 + 16 + 'px';
+      }
     } else {
       if (parent.steps[parent.steps.length - 1] !== this) {
         this.style = { height: space };

packages/steps/src/steps.vue

@@ -13,6 +13,7 @@ export default {
       type: String,
       default: 'horizontal'
     },
+    alignCenter: Boolean,
     finishStatus: {
       type: String,
       default: 'finish'