新增示例页面

src/views/form/stepForm/stepForm.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div class="n-layout-page-header">
+      <n-card :bordered="false" title="分步表单">
+        将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
+      </n-card>
+    </div>
+    <n-card :bordered="false" class="proCard mt-4">
+      <n-space vertical class="steps">
+        <n-steps :current="currentTab" :status="currentStatus">
+          <n-step
+            title="填写转账信息"
+            description="确保填写正确"
+          />
+          <n-step
+            title="确认转账信息"
+            description="确认转账信息"
+          />
+          <n-step
+            title="完成"
+            description="恭喜您，转账成功"
+          />
+        </n-steps>
+        <step1 v-if="currentTab === 1" @nextStep="nextStep"/>
+        <step2 v-if="currentTab === 2" @nextStep="nextStep" @prevStep="prevStep"/>
+        <step3 v-if="currentTab === 3" @prevStep="prevStep" @finish="finish"/>
+      </n-space>
+    </n-card>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+import step1 from './Step1.vue'
+import step2 from './Step2.vue'
+import step3 from './Step3.vue'
+
+export default defineComponent({
+  components: { step1, step2, step3 },
+  setup() {
+    const currentTab = ref(1)
+    const currentStatus = ref('process')
+
+    function nextStep() {
+      if (currentTab.value < 3) {
+        currentTab.value += 1
+      }
+    }
+
+    function prevStep() {
+      if (currentTab.value > 1) {
+        currentTab.value -= 1
+      }
+    }
+
+    function finish() {
+      currentTab.value = 1
+    }
+
+    return {
+      currentTab,
+      currentStatus,
+      nextStep,
+      prevStep,
+      finish
+    }
+  }
+})
+</script>
+
+<style lang="less" scoped>
+.steps {
+  max-width: 750px;
+  margin: 16px auto;
+}
+</style>