From 673aec052cedd6571e62a1325aae9adc130c14fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=AF=E8=89=B2=E7=90=89=E7=92=83?= <1439655764@qq.com>
Date: Sun, 19 Jun 2022 16:05:28 +0800
Subject: [PATCH] feat(Steps): add align-center prop (#10617)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 添加steps组件alignCenter 的属性

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

* 修改 Steps API Doc

* 格式化setp代码，并删除无用注释
---
 src/step/index.js         | 13 ++++++++-----
 src/steps/README.md       |  1 +
 src/steps/README.zh-CN.md |  1 +
 src/steps/index.js        |  4 ++++
 4 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/step/index.js b/src/step/index.js
index 36c65864b..35e329407 100644
--- a/src/step/index.js
+++ b/src/step/index.js
@@ -23,12 +23,15 @@ export default createComponent({
     },
 
     lineStyle() {
-      if (this.status === 'finish') {
-        return { background: this.parent.activeColor };
+      const { activeColor, inactiveColor, alignCenter, direction } = this.parent
+      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} />
diff --git a/src/steps/README.md b/src/steps/README.md
index afd08f1ce..d46e66789 100644
--- a/src/steps/README.md
+++ b/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_ | - |
diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md
index 17de50564..ea8f76297 100644
--- a/src/steps/README.zh-CN.md
+++ b/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_ | - |
diff --git a/src/steps/index.js b/src/steps/index.js
index 1b5b5ed11..47c2124f8 100644
--- a/src/steps/index.js
+++ b/src/steps/index.js
@@ -24,6 +24,10 @@ export default createComponent({
       type: String,
       default: 'checked',
     },
+    alignCenter: {
+      type: Boolean,
+      default: false,
+    }
   },
 
   render() {