广州网站推广自助_软件高端开发_汕头seo排名公司_软文范例300字

一、问题
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-modalv-if="visible"v-model:visible="visible"title="标题"@ok="handleOk">
</a-modal>