naive ui dialog怎么写form表单

Naive UI Dialog 中可以使用 `<n-form>` 标签来创建表单，以下是一个简单的例子：

<n-dialog v-model:visible="dialogFormVisible" title="表单对话框">
  <n-form ref="form" :model="formData" :rules="formRules">
    <n-form-item label="名称" label-width="80px" prop="name">
      <n-input v-model="formData.name" placeholder="请输入名称"></n-input>
    </n-form-item>
    <n-form-item label="年龄" label-width="80px" prop="age">
      <n-input-number v-model="formData.age"></n-input-number>
    </n-form-item>
    <n-form-item>
      <n-button type="primary" @click="submitForm">提交</n-button>
      <n-button @click="resetForm">重置</n-button>
    </n-form-item>
  </n-form>
</n-dialog>

在上面的代码中，我们首先创建了一个 `<n-dialog>` 标签，然后在其内部使用了 `<n-form>` 标签来创建表单。在 `<n-form>` 标签中，我们可以使用 `<n-form-item>` 标签来创建表单项，然后在表单项中使用不同的控件（如 `<n-input>` 和 `<n-input-number>`）来构建输入框。

在表单中，我们可以使用 `v-model` 指令来双向绑定表单数据，使用 `prop` 属性来指定表单项对应的数据字段。同时，我们还可以使用 `:rules` 属性来指定表单项的验证规则。

在表单下方，我们可以使用 `<n-button>` 标签来创建提交和重置按钮，并在其 `click` 事件中调用相应的方法来提交或重置表单数据。

在 JavaScript 中，我们可以定义 `formData` 和 `formRules` 变量来存储表单数据和验证规则，然后在提交表单时调用 `<n-form>` 标签的 `submit` 方法来进行表单验证和提交。

这里是完整的 JavaScript 代码：

export default {
  data() {
    return {
      dialogFormVisible: false,
      formData: {
        name: '',
        age: 0
      },
      formRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', message: '年龄必须为数字值', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.submit()
    },
    resetForm() {
      this.$refs.form.resetFields()
    },
    onSubmit() {
      // 表单验证通过后的操作
      console.log(this.formData)
      this.dialogFormVisible = false
    }
  }
}