vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > element-ui el-drawer关闭优化

解决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关闭优化的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文