支持 Vue 3.2.x 语法升级为，script setup

src/views/form/stepForm/Step1.vue

@@ -47,8 +47,8 @@
   </n-form>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref, defineEmits } from 'vue';
   import { useMessage } from 'naive-ui';
 
   const myAccountList = [
@@ -73,61 +73,50 @@
     },
   ];
 
-  export default defineComponent({
-    emits: ['nextStep'],
-    setup(_, { emit }) {
-      const form1Ref: any = ref(null);
-      const message = useMessage();
-      const current = ref(1);
+  const emit = defineEmits(['nextStep']);
 
-      return {
-        form1Ref,
-        current,
-        formValue: ref({
-          accountType: 1,
-          myAccount: null,
-          account: 'xioama@qq.com',
-          money: '1980',
-          name: 'Ah jung',
-        }),
-        rules: {
-          name: {
-            required: true,
-            message: '请输入收款人姓名',
-            trigger: 'blur',
-          },
-          account: {
-            required: true,
-            message: '请输入收款账户',
-            trigger: 'blur',
-          },
-          money: {
-            required: true,
-            message: '请输入转账金额',
-            trigger: 'blur',
-          },
-          myAccount: {
-            required: true,
-            type: 'number',
-            message: '请选择付款账户',
-            trigger: 'change',
-          },
-        },
-        myAccountList,
-        accountTypeList,
-        formSubmit() {
-          form1Ref.value.validate((errors) => {
-            if (!errors) {
-              emit('nextStep');
-            } else {
-              message.error('验证失败，请填写完整信息');
-            }
-          });
-        },
-        resetForm() {
-          form1Ref.value.restoreValidation();
-        },
-      };
-    },
+  const form1Ref: any = ref(null);
+  const message = useMessage();
+
+  const formValue = ref({
+    accountType: 1,
+    myAccount: null,
+    account: 'xioama@qq.com',
+    money: '1980',
+    name: 'Ah jung',
   });
+
+  const rules = {
+    name: {
+      required: true,
+      message: '请输入收款人姓名',
+      trigger: 'blur',
+    },
+    account: {
+      required: true,
+      message: '请输入收款账户',
+      trigger: 'blur',
+    },
+    money: {
+      required: true,
+      message: '请输入转账金额',
+      trigger: 'blur',
+    },
+    myAccount: {
+      required: true,
+      type: 'number',
+      message: '请选择付款账户',
+      trigger: 'change',
+    },
+  };
+
+  function formSubmit() {
+    form1Ref.value.validate((errors) => {
+      if (!errors) {
+        emit('nextStep');
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
 </script>

src/views/form/stepForm/Step2.vue

@@ -32,50 +32,41 @@
   </n-form>
 </template>
 
-<script lang="ts">
-  import { defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+  import { ref, defineEmits } from 'vue';
   import { useMessage } from 'naive-ui';
+  const form2Ref: any = ref(null);
+  const message = useMessage();
+  const loading = ref(false);
 
-  export default defineComponent({
-    emits: ['prevStep', 'nextStep'],
-    setup(_, { emit }) {
-      const form2Ref: any = ref(null);
-      const message = useMessage();
-      const loading = ref(false);
-
-      function prevStep() {
-        emit('prevStep');
-      }
-
-      function formSubmit() {
-        loading.value = true;
-        form2Ref.value.validate((errors) => {
-          if (!errors) {
-            setTimeout(() => {
-              emit('nextStep');
-            }, 1500);
-          } else {
-            message.error('验证失败，请填写完整信息');
-          }
-        });
-      }
-
-      return {
-        form2Ref,
-        loading,
-        formValue: ref({
-          password: '086611',
-        }),
-        rules: {
-          password: {
-            required: true,
-            message: '请输入支付密码',
-            trigger: 'blur',
-          },
-        },
-        prevStep,
-        formSubmit,
-      };
-    },
+  const formValue = ref({
+    password: '086611',
   });
+
+  const rules = {
+    password: {
+      required: true,
+      message: '请输入支付密码',
+      trigger: 'blur',
+    },
+  };
+
+  const emit = defineEmits(['prevStep', 'nextStep']);
+
+  function prevStep() {
+    emit('prevStep');
+  }
+
+  function formSubmit() {
+    loading.value = true;
+    form2Ref.value.validate((errors) => {
+      if (!errors) {
+        setTimeout(() => {
+          emit('nextStep');
+        }, 1500);
+      } else {
+        message.error('验证失败，请填写完整信息');
+      }
+    });
+  }
 </script>

src/views/form/stepForm/Step3.vue

@@ -31,34 +31,17 @@
   </div>
 </template>
 
-<script lang="ts">
-  import { defineComponent } from 'vue';
-  import { useRouter } from 'vue-router';
+<script lang="ts" setup>
+  import { defineEmits } from 'vue';
 
-  export default defineComponent({
-    emits: ['finish', 'prevStep'],
-    setup(_, { emit }) {
-      const router = useRouter();
+  const emit = defineEmits(['finish', 'prevStep']);
+  function prevStep() {
+    emit('prevStep');
+  }
 
-      function prevStep() {
-        emit('prevStep');
-      }
-
-      function finish() {
-        emit('finish');
-      }
-
-      function toOrderList() {
-        router.push('/form/step-form');
-      }
-
-      return {
-        prevStep,
-        finish,
-        toOrderList,
-      };
-    },
-  });
+  function finish() {
+    emit('finish');
+  }
 </script>
 
 <style lang="less" scoped>

src/views/form/stepForm/stepForm.vue

@@ -5,7 +5,7 @@
         将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
       </n-card>
     </div>
-    <n-card :bordered="false" class="proCard mt-4">
+    <n-card :bordered="false" class="mt-4 proCard">
       <n-space vertical class="steps" justify="center">
         <n-steps :current="currentTab" :status="currentStatus">
           <n-step title="填写转账信息" description="确保填写正确" />
@@ -20,43 +20,30 @@
   </div>
 </template>
 
-<script>
+<script setup>
   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');
+  const currentTab = ref(1);
+  const currentStatus = ref('process');
 
-      function nextStep() {
-        if (currentTab.value < 3) {
-          currentTab.value += 1;
-        }
-      }
+  function nextStep() {
+    if (currentTab.value < 3) {
+      currentTab.value += 1;
+    }
+  }
 
-      function prevStep() {
-        if (currentTab.value > 1) {
-          currentTab.value -= 1;
-        }
-      }
+  function prevStep() {
+    if (currentTab.value > 1) {
+      currentTab.value -= 1;
+    }
+  }
 
-      function finish() {
-        currentTab.value = 1;
-      }
-
-      return {
-        currentTab,
-        currentStatus,
-        nextStep,
-        prevStep,
-        finish,
-      };
-    },
-  });
+  function finish() {
+    currentTab.value = 1;
+  }
 </script>
 
 <style lang="less" scoped>