鼠标点在弹框上没有放开,然后又移出到外面的遮罩上,这个时候还是触发了遮罩的点击事件
创建这样的指令然后在 el-dialog 或 el-drawer 标签上使用就可以了
import Vue from 'vue'
Vue.directive('move-outside', {
bind(el, binding, vnode) {
// 通过事件委托绑定到共同父级元素上
el.addEventListener('mousedown', handleMouseDown)
/**
* 点击事件
* @param event
*/
function handleMouseDown(event) {
const target = event.target
const drawerWrapper = target.closest('.el-drawer__wrapper')
const dialogWrapper = target.closest('.el-dialog__wrapper')
// 抽屉
if (drawerWrapper) {
handleMoveOutsideDrawer(drawerWrapper, target)
// 弹框
} else if (dialogWrapper) {
handleMoveOutsideDialog(dialogWrapper, target)
}
}
function handleMoveOutsideDrawer(wrapper, target) {
// 获取el-drawer元素
const drawer = wrapper.querySelector('.el-drawer')
// 判断是否点击在元素之外
if (drawer && !drawer.contains(target)) {
// 执行原有逻辑
if (!vnode.componentInstance.wrapperClosable) return
vnode.componentInstance.closeDrawer()
}
}
function handleMoveOutsideDialog(wrapper, target) {
// 获取 el-dialog元素
const dialog = wrapper.querySelector('.el-dialog')
// 判断是否点击在元素之外
if (dialog && !dialog.contains(target)) {
// 执行原有逻辑
if (!vnode.componentInstance.closeOnClickModal) return
vnode.componentInstance.handleClose()
}
}
// 清空原组件点击事件
vnode.componentInstance.handleWrapperClick = () => {}
}
})