From 80251742f6f5d560d546bd7cd812c35433158a91 Mon Sep 17 00:00:00 2001
From: xuqingkai <xuqingkai@hd123.com>
Date: Sun, 7 Apr 2024 18:11:48 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E2=9C=8F=EF=B8=8F=20=20Steps=E6=AD=A5?=
 =?UTF-8?q?=E9=AA=A4=E6=9D=A1=E5=A2=9E=E5=8A=A0=E6=8E=A7=E5=88=B6=E8=BF=9B?=
 =?UTF-8?q?=E5=BA=A6=E7=9A=84=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/component/steps.md                             | 13 +++++++++++--
 .../wot-design-uni/components/wd-step/wd-step.vue   |  2 +-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/docs/component/steps.md b/docs/component/steps.md
index c17697cf1..9895e80b8 100644
--- a/docs/component/steps.md
+++ b/docs/component/steps.md
@@ -12,13 +12,22 @@
 `active` 为步骤进度，为 number 类型，步骤的下标。
 
 ```html
-<wd-steps :active="0">
+<wd-steps :active="active">
   <wd-step />
   <wd-step />
   <wd-step />
 </wd-steps>
 ```
 
+```ts
+const active = ref<number>(0)
+
+function nextStep() {
+  active.value = active.value + 1
+}
+
+```
+
 ## 水平居中
 
 设置 `align-center` 水平居中，只对横向步骤条有效。
@@ -36,7 +45,7 @@
 可以通过 `title` 和 `description` 设置步骤的标题和描述信息。如果不设置标题，则会使用默认的文案。
 
 ```html
-<wd-steps :active="0" align-center>
+<wd-steps :active="active" align-center>
   <wd-step title="步骤1" description="注册1个账号" />
   <wd-step title="步骤2" description="登录账号并绑定手机" />
   <wd-step title="步骤3" description="完善个人信息" />
diff --git a/src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue b/src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue
index b08d786cc..7703c8ffd 100644
--- a/src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue
@@ -25,7 +25,7 @@
         <text v-else>{{ currentTitle }}</text>
       </view>
       <view v-if="$slots.description || description" class="wd-step__description">
-        <slot v-if="$slots.description" name="description"/>
+        <slot v-if="$slots.description" name="description" />
         <text v-else>{{ description }}</text>
       </view>
     </view>