feat(Steps): add align-center prop (#10617)

* 添加steps组件alignCenter 的属性

* 设置steps 的 alignCenter在横向时无效

* 修改 Steps API Doc

* 格式化setp代码，并删除无用注释

src/step/index.js

@@ -23,12 +23,15 @@ export default createComponent({
     },
 
     lineStyle() {
-      if (this.status === 'finish') {
+      const { activeColor, inactiveColor, alignCenter, direction } = this.parent
-        return { background: this.parent.activeColor };
+      return {
+        background: this.status === 'finish' ? activeColor : inactiveColor,
+        top: (alignCenter && direction === 'vertical') && '50%'
       }
-      return { background: this.parent.inactiveColor };
     },
-
+    circleContainerStyle() {
+      return { top: (this.parent.alignCenter && this.parent.direction === 'vertical') && '50%' };
+    },
     titleStyle() {
       if (this.active) {
         return { color: this.parent.activeColor };
@@ -111,7 +114,7 @@ export default createComponent({
         >
           {this.slots()}
         </div>
-        <div class={bem('circle-container')} onClick={this.onClickStep}>
+        <div class={bem('circle-container')} onClick={this.onClickStep} style={this.circleContainerStyle} >
           {this.genCircle()}
         </div>
         <div class={bem('line')} style={this.lineStyle} />

src/steps/README.md

@@ -72,6 +72,7 @@ export default {
 | active | Active step | _number \| string_ | `0` |
 | direction | Can be set to `vertical` | _string_ | `horizontal` |
 | active-color | Active step color | _string_ | `#07c160` |
+| align-center | Center title and description(Only active by `direction: vertical` )  | _boolean_ | `false` |
 | inactive-color `v2.9.1` | Inactive step color | _string_ | `#969799` |
 | active-icon | Active icon name | _string_ | `checked` |
 | inactive-icon | Inactive icon name | _string_ | - |

src/steps/README.zh-CN.md

@@ -82,6 +82,7 @@ export default {
 | active | 当前步骤 | _number \| string_ | `0` |
 | direction | 显示方向，可选值为 `vertical` | _string_ | `horizontal` |
 | active-color | 激活状态颜色 | _string_ | `#07c160` |
+| align-center | 进行居中对齐（设置`direction: vertical`时有效） |  _boolean_ | `false` |
 | inactive-color `v2.9.1` | 未激活状态颜色 | _string_ | `#969799` |
 | active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | `checked` |
 | inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/zh-CN/icon) | _string_ | - |

src/steps/index.js

@@ -24,6 +24,10 @@ export default createComponent({
       type: String,
       default: 'checked',
     },
+    alignCenter: {
+      type: Boolean,
+      default: false,
+    }
   },
 
   render() {