naiveUI dialog content render 怎么实现inpput的数据绑定啊？

Question

这的数据不能删也不能改，而且autofocus自动焦点也没对上。我想在框里输入然后能提交

// 打开添加、修改字典
  editData(data) {
      console.log(data)
      let title, inputValue
      if (data.codeType) {
        title = '修改字典'
        inputValue = data.comment
      } else {
        title = '添加字典'
      }
      const that = this
      $dialog.create({
        title: title,
        showIcon: false,
        content: () => {
          return [
            h(NInput, {
              value: inputValue,
              modelValue: inputValue, // 使用 modelValue 进行双向绑定
              clearable: true,
              autofocus: true,
              'onUpdate:modelValue': (val) => {
                console.log(val)
                inputValue = val
              },
            }),
          ]
        },
        positiveText: '提交',
        negativeText: '关闭',
        onPositiveClick: () => {
          console.log(inputValue)
        },
      })
}

naiveUI 有像elementUI那样的js弹框吗？不用html的

Answer 1

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

在 naiveUI 中，要实现 Dialog 内容区域中 Input 组件的数据绑定，并确保 autofocus 属性生效以及数据提交，您可以按照以下方式调整代码：

// 首先，在 Vue 实例的 data 属性中定义一个用于双向绑定的变量
data() {
  return {
    dialogInputValue: '',
    // ... 其他数据项
  };
},

// 打开添加、修改字典的方法中
editData(data) {
  console.log(data);
  let title = '';
  if (data.codeType) {
    title = '修改字典';
    this.dialogInputValue = data.comment; // 设置默认值
  } else {
    title = '添加字典';
  }

  const that = this;
  $dialog.create({
    title,
    showIcon: false,
    content: () => [
      h(NInput, {
        modelValue: that.dialogInputValue, // 使用 modelValue 进行双向绑定
        clearable: true,
        autofocus: true,
        'onUpdate:modelValue': (val) => { // 监听输入值变化
          that.dialogInputValue = val;
        },
      }),
    ],
    positiveText: '提交',
    negativeText: '关闭',
    onPositiveClick: () => {
      // 在这里处理提交逻辑，比如将 dialogInputValue 提交到服务器或更新到现有数据
      console.log('提交的数据:', that.dialogInputValue);
      // 根据实际情况编写提交函数
      // this.submitDictionary(that.dialogInputValue);
    },
  });
},

通过上述代码，您已经实现了：

1. Input 组件与 Vue 实例中的 dialogInputValue 的双向绑定。
2. Input 组件开启 autofocus，使其自动获取焦点。
3. 当点击“提交”按钮时，调用 onPositiveClick 回调函数，此时可以通过 dialogInputValue 获取用户输入的内容并进行后续操作。

naiveUI 本身提供了类似的 Dialog 组件和 Input 组件，可以满足类似于 ElementUI 的弹框功能。不过请注意，实际项目中需要根据 naiveUI 的版本和文档来使用正确的属性名称和事件绑定方式，以上示例代码是基于 naiveUI v2.x 版本编写的。对于最新版，请查阅官方文档：naiveUI 官方文档。