解决element-ui el-drawer抽屉el-dialog弹框关闭优化demo

 更新时间:2023年06月29日 09:37:02   作者:围_城  
这篇文章主要为大家介绍了解决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关闭优化的资料请关注脚本之家其它相关文章!

相关文章

  • Vue生命周期详解

    Vue生命周期详解

    这篇文章详细介绍了Vue的生命周期,文中通过代码示例介绍的非常详细。对大家的学习有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • vue封装公共方法的实现代码

    vue封装公共方法的实现代码

    这篇文章给大家介绍了vue封装公共方法的实现,文章中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-01-01
  • 如何写一个 Vue3 的自定义指令

    如何写一个 Vue3 的自定义指令

    这篇文章主要介绍了如何写一个 Vue3 的自定义指令,如果我们想在 Vue.js 的项目中实现图片懒加载,那么用自定义指令就再合适不过了,那么接下来就让我手把手带你用 Vue3 去实现一个图片懒加载的自定义指令 v-lazy,需要的朋友可以参考一下
    2022-01-01
  • 以v-model与promise两种方式实现vue弹窗组件

    以v-model与promise两种方式实现vue弹窗组件

    这篇文章主要介绍了vue弹窗组件之两种方式v-model与promise,每种方式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 如何通过Vue实现@人的功能

    如何通过Vue实现@人的功能

    这篇文章主要介绍了如何通过vue实现微博中常见的@人的功能,同时增加鼠标点击事件和一些页面小优化。感兴趣的小伙伴可以跟随小编一起学习一下
    2021-12-12
  • Vue项目中在父组件中直接调用子组件的方法

    Vue项目中在父组件中直接调用子组件的方法

    这篇文章主要给大家介绍了Vue项目中如何在父组件中直接调用子组件的方法,文章通过代码示例介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-11-11
  • Vue 列表上下过渡效果的实例代码

    Vue 列表上下过渡效果的实例代码

    最近有个需求,一个列表上下移动要有简单过渡效果。本文通过实例代码给大家介绍Vue 列表上下过渡效果,需要的朋友可以参考下
    2019-06-06
  • vue对于低版本浏览器兼容问题的解决思路

    vue对于低版本浏览器兼容问题的解决思路

    很多时候使用vue开发的项目,由于无法在低版本浏览器上运行,所以需要解决下,下面这篇文章主要给大家介绍了关于vue对于低版本浏览器兼容问题的解决思路,需要的朋友可以参考下
    2023-02-02
  • Vue中的Props(不可变状态)

    Vue中的Props(不可变状态)

    这篇文章主要介绍了Vue中的Props(不可变状态),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • VUE使用router.push实现页面跳转和传参方式

    VUE使用router.push实现页面跳转和传参方式

    这篇文章主要介绍了VUE使用router.push实现页面跳转和传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论