解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo
作者:围_城
这篇文章主要为大家介绍了解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
正文
鼠标点在弹框上没有放开,然后又移出到外面的遮罩上,这个时候还是触发了遮罩的点击事件
创建这样的指令然后在 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 = () => {} } })
以上就是解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo的详细内容,更多关于element-ui el-drawer关闭优化的资料请关注脚本之家其它相关文章!