naive-ui-admin/src/views/form/stepForm/Step2.vue

<template>
  <n-form
    :label-width="90"
    :model="formValue"
    :rules="rules"
    label-placement="left"
    ref="form2Ref"
    style="max-width: 500px; margin: 40px auto 0;"
  >
    <n-form-item label="付款账户" path="myAccount">
      <span>NaiveUiAdmin@163.com</span>
    </n-form-item>
    <n-form-item label="收款账户" path="account">
      <span>NaiveUiAdmin@qq.com</span>
    </n-form-item>
    <n-form-item label="收款人姓名" path="name">
      <span>Ah jung</span>
    </n-form-item>
    <n-form-item label="转账金额" path="money">
      <span>￥1980</span>
    </n-form-item>
    <n-divider/>
    <n-form-item label="支付密码" path="password">
      <n-input type="password" v-model:value="formValue.password"/>
    </n-form-item>
    <div style="margin-left:80px">
      <n-space>
        <n-button type="primary" :loading="loading" @click="formSubmit">提交</n-button>
        <n-button @click="prevStep">上一步</n-button>
      </n-space>
    </div>
  </n-form>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'

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,
    }
  }
})
</script>