docs: ✏️ Steps步骤条增加控制进度的示例

Moonofweisheng · Apr 7, 2024 · 8025174 · 8025174
1 parent f979ccc
commit 8025174
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git 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
@@ -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>