点击ok或者Cancel之后弹框不消失

Question

老师，
我的代码和你的一模一样，但是无论点击ok或者cancel，这个弹框都不消失， 需要刷新之后才会消失。
点ok之后 再刷新 发现文档时正常删除了的；点Cancel时 不会删除；且点击后会打印对应的日志。
想问一下怎么处理弹框自动消失的问题呢？

Answer 1

慕桂英8549692 2024-07-29 03:54:07

我也遇到了这个问题。使用 Modal.method() 这种方式创建模态框无法解决关闭的问题。

后来使用了传统的 <a-modal> 方式，问题才得以解决。

<a-modal v-model:visible="confirmDeleteModalVisible"
         title="重要提醒"
         @ok="handleConfirmDeleteButtonClick">
  <p>
    将删除: [{{deleteItemsInfo.deleteItemNames.toString()}}], 删除后不可恢复, 确认删除?
  </p>
</a-modal>

不过这种方式创建的模态框就没有样式了，只是最普通的模态框（如图所示）。后续或许可以尝试给模态框标题增加图标。

Answer 2

慕工程7058922 2024-05-29 16:15:31

这个问题解决了吗：点击ok或者Cancel之后弹框不消失。

我也遇到这个问题了。

• weixin_慕莱坞7121976 #1

  我也遇到了，请问解决了么？

Answer 3

甲蛙 2024-04-16 15:47:56

对话框的关闭就是一个参数，把modalVisible设置成false就可以了

• 提问者 zhanweic #1

  我加在onOk里面和外面都也不行，是加这一句吗？          modalVisible.value = false;
  
  
    const handleDelete = (id: number) => {
        // console.log(level1, level1.value, id)
        // 清空数组，否则多次删除时，数组会一直增加
        deleteIds.length = 0;
        deleteNames.length = 0;
        getDeleteIds(level1.value, id);
        Modal.confirm({
          title: '重要提醒',
          icon: createVNode(ExclamationCircleOutlined),
          content: '将删除：【' + deleteNames.join("，") + "】删除后不可恢复，确认删除？",
          onOk() {
            // console.log(ids)
            axios.delete("/doc/delete/" + deleteIds.join(",")).then((response) => {
              const data = response.data; // data = commonResp
              if (data.success) {
                // 重新加载列表
                handleQuery();
              }
            });
            modalVisible.value = false;
          },
        });
      };

• 甲蛙 回复 提问者 zhanweic #2

  ​用Modal.confirm这种写法应该是会自动关闭的，不需要写modalVisible.value = false
  
  有一种可能是代码有错，可以看浏览器F12有没有报错
  
  还有一种可能是组件不兼容，比如你安装的是antdv的最新版本，但代码是拷的我的代码，可能不兼容

• 慕工程7058922 回复 甲蛙 #3

  回复 甲蛙：老师，我也遇到这个问题了，取消不了。F2没有报错。

点开查看后面1条评论