vue指令-点击其他区域关闭dom

最新推荐文章于 2024-07-22 14:45:24 发布

一个巨蟹座的前端

最新推荐文章于 2024-07-22 14:45:24 发布

阅读量253

点赞数 4

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47813845/article/details/136883587

版权

const clickOutSide = {
  bind(el, binding, vnode) {
    // 指令绑定的元素外的点击事件
    function documentClick(e) {
      // 判断点击是否发生在el之外
      if (!(el === e.target || el.contains(e.target))) {
        // 如果发生在外部，执行绑定的方法
        binding.value(e);
      }
    }
    // 在document上添加点击事件监听
    document.addEventListener('click', documentClick);
    // 设置一个标记，为了在组件销毁时移除事件监听
    el.__click_outside__ = {
      documentClick,
    };
  },
  unbind(el) {
    // 当指令被解绑时，移除事件监听
    document.removeEventListener('click', el.__click_outside__.documentClick);
    delete el.__click_outside__;
  },
}