ant-design-vue搞一个等待回调的确认弹窗

最新推荐文章于 2025-03-27 14:50:58 发布

原创最新推荐文章于 2025-03-27 14:50:58 发布 · 774 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章介绍了如何在Vue3项目中使用AntDesignVue库实现确认对话框，包括使用`checkComfirm`函数、设置自定义提示内容和关闭蒙版功能。作者分享了处理确认对话框的方法和遇到的问题。

在网上搜了一下没搜到，所以自己搞了一个，分享给跟我一样有需要的小白。

HandleComfirm.vue组件代码：

//HandleComfirm.vue组件代码：
<script setup lang="ts">
  import { Modal } from 'ant-design-vue';

  function checkComfirm(method) {
    return new Promise((resolve) => {
      const modal = Modal.confirm();//这里提示需要输入参数，我没搞明白，希望有大神指点
      modal.update({
        title: '请确认',
        content: method.content,//自己的提示语
        maskClosable: false,//不允许通过点击蒙版关闭弹窗
        onOk: () => {
          resolve(true);
          //console.log('确定了');
        },
        onCancel: () => {
          resolve(false);
          // console.log('取消了')
        },
      });
    });
  }
  defineExpose({ checkComfirm });
</script>

我这里是vue3 + ts，如果不是用ts的话，那就把lang="ts"去掉就行了，自己灵活了

引用HandleComfirm组件的页面：


<script setup lang="ts">
  import HandleComfirm from '/你的组件路径/HandleComfirm.vue';
  //通过某个函数触发弹窗，如：handleSubmit
  async function handleSubmit() {
    try {
      //打开并等待用户点击获取回调
      const isSubmit = await $handleComfirm.value?.checkComfirm({ content: '确定提交数据？' });
      //得到回调，开始判断
      if (!isSubmit) {
        return;
      }
      //你的其他内容...
    }catch(){}
  }

这里为什么要关掉maskClosable呢，看大家的场景需要吧，因为antdesign没有提供关闭蒙版的api（可能是我没找到，我太菜了），我没有办法在关闭蒙版时执行我需要的操作，所以我就关掉了。