解决Ant Design Vue使用Modal对话框无法关闭的问题《操作Dom不需要降低版本》

一、问题
Ant Design Vue 使用 Modal.confirm 之类的静态方法 发现无法关闭弹窗，网上搜了好多都是降低版本，并锁定版本，但是目前在做的项目对UI样式要求很高，降低或者升级版本会导致部分样式不符合当前的UI规范，于是通过操作Dom的方式解决。

二、解决方法

// 静态方法打开 Modal 弹窗
Modal.confirm({
        title:  'This is a success message',
        icon: createVNode(InfoCircleFilled),
        content: 'some messages...some messages...',
        okText: 'yes',
        cancelText: 'no',
        onOk() {
        // 操作dom的函数 用于关闭弹窗
          closeMyFn()
          console.log('onOk');
        },
        onCancel() {
          closeMyFn()
          console.log('onCancel');
        },
      });
     timer.value = setTimeout(()=> {
     // 打开弹窗时给右上角的 X 绑定点击事件
       clickX()
    },200)

// 关闭弹窗
const closeMyFn= async () => {
  let dom = document.getElementsByClassName('ems-front-modal-body')[0]
  let domRoot = document.getElementsByClassName('ems-front-modal-root')[0]
  dom.remove()
  domRoot.remove()
}

// 点击 Modal 右上角的 X
const clickX = async ()=> {
  modalXDom.value = document.getElementsByClassName('ems-front-modal-close')[0]
  modalXDom.value.addEventListener('click',()=>{
    // 点击右上角的 X 调用关闭弹窗的方法
    closeMyFn()
  })
}

// 卸载的时候清空定时器和绑定的点击事件
onUnmounted(() => {
  modalXDom.value && modalCloseDom.value.removeEventListener('click', () => {})
  timer.value && clearTimeout(timer.value)
})

三、注意
如果一个页面既有 Modal.confirm （静态方法点击的弹窗） 又有 < a-modal >类的弹窗需改给 < a-modal > 加 v-if 例如

<a-modal
    v-if="visible"
    v-model:visible="visible"
    title="标题"
    @ok="handleOk"
  >
</a-modal>