naiveUI 有像 element-plus 那样的js提交框吗？

Question

就像这样是js的提交框，不是写在html的

naiveUI找了一圈也没有，只有写在html的，没有js的

自己尝试用 dialog 写render，有bug😂

naiveUI dialog content render 怎么实现inpput的数据绑定啊？_前端-CSDN问答 CSDN问答为您找到naiveUI dialog content render 怎么实现inpput的数据绑定啊？相关问题答案，如果想了解更多关于naiveUI dialog content render 怎么实现inpput的数据绑定啊？ 前端、javascript、vue.js 技术问题等相关问答，请访问CSDN问答。 https://ask.csdn.net/questions/8061665

Answer 1

引自免费微信小程序：皆我百晓生

在Naive UI中，虽然它不像Element Plus那样直接提供一个现成的基于JS的提交框组件，但你可以通过结合使用Dialog和Form组件来自定义实现。以下是一个示例，展示如何在Naive UI中创建一个动态渲染的对话框内容，并实现表单输入的数据绑定：

<template>
  <n-button @click="showDialog">打开对话框</n-button>

  <n-dialog v-model:visible="dialogVisible" title="自定义表单">
    <template #footer>
      <n-space>
        <n-button @click="dialogVisible = false">取消</n-button>
        <n-button type="primary" @click="handleSubmit">提交</n-button>
      </n-space>
    </template>

    <n-form ref="form" :model="formData" :rules="formRules">
      <!-- 动态渲染表单 -->
      <div v-for="(item, index) in formItems" :key="index">
        <n-form-item :prop="item.prop" :label="item.label" :rules="item.rules">
          <n-input v-model="formData[item.prop]" placeholder="请输入"></n-input>
        </n-form-item>
      </div>
    </n-form>
  </n-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      formData: {}, // 表单数据对象
      formItems: [
        { prop: 'username', label: '用户名', rules: [{ required: true, message: '用户名不能为空' }] },
        { prop: 'email', label: '邮箱', rules: [{ required: true, type: 'email', message: '请输入正确的邮箱地址' }] },
      ],
      formRules: {}, // 根据formItems生成的具体规则对象
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    handleSubmit() {
      this.$refs.form.validate().then(valid => {
        if (valid) {
          console.log('表单验证成功，准备提交：', this.formData);
          // 在这里处理表单提交逻辑
        } else {
          console.log('表单验证失败');
        }
      });
    },
  },
};
</script>

这段代码首先定义了一个n-dialog组件作为对话框容器，并在其内部渲染了一个n-form组件用于构建表单。formItems数组用于存储表单字段信息，根据这些信息动态渲染出相应的表单控件（这里是n-input）。当点击“提交”按钮时，会触发handleSubmit方法，该方法调用validate函数进行表单验证，验证成功后可以获取到表单中的数据并执行实际的提交操作。

请根据你的具体需求调整上述代码中的formItems数组和其他部分。