Vue 自定义指令实现点击元素外触发事件

Youngs 发布于2019-08-23 13:44 / 2955人阅读

摘要：前置知识既然要用的自定义指令，那么肯定要了解一下自定义指令的相关知识啦，关于这部分的内容，看我之前写过的自定义指令或者直接看官方文档就可以啦，这里我就不再多讲了。

前言最近搞了毕设，需要实现一个场景，点击一块区域，弹出一个编辑区域，点击页面的其他地方的时候，这个编辑区域就隐藏，本想想之前写模态框一样写个方法的时候，突然

觉得可以尝试用 vue 相关的东西优雅的解决这个事情，然后就学了下面的自定义指令了。

前置知识

既然要用 Vue 的自定义指令，那么肯定要了解一下 Vue 自定义指令的相关知识啦，关于这部分的内容，看我之前写过的《Vue 自定义指令》或者直接看官方文档就可以啦，这里我就不再多讲了。

解决思路

这个按照我之前写模态框的经验，我的做法是给 document 绑定一个点击事件，然后判断触发点击事件的那个元素是不是模态框所在的目标区域，如果不是，那么就触发隐藏事件。看一下代码吧

$(document).mouseup(function(e){
  var _con = $(" 目标区域 ");   // 设置目标区域
  if(!_con.is(e.target)){ // 判断是不是目标区域
    some code...   // 功能代码
  }
});

实现

有了思路，实现起来就简单了。就直接放定义的代码啦

const clickOutside = {
  // 初始化指令
  bind(el, binding, vnode) {
    function clickHandler(e) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target)) {
        return false;
      }
      // 判断指令中是否绑定了函数
      if (binding.expression) {
        // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e);
      }
    }
    // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
    el.__vueClickOutside__ = clickHandler;
    document.addEventListener("click", clickHandler);
  },
  update() {},
  unbind(el, binding) {
    // 解除事件监听
    document.removeEventListener("click", el.__vueClickOutside__);
    delete el.__vueClickOutside__;
  },
};


directives: {clickOutside},

接下来就可以就可以在组件内直接使用啦

我实现的效果

然后关于这个点击元素外触发某个事件，如果还有啥其他优雅的方式的话，下面留言分享一下哈。

云服务器 GPU云服务器 js 自定义触发事件自定义指令自定义指令实例自定义事件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99483.html

Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

baoxl 2019-08-30 13:47 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

liukai90 2019-08-21 17:05 评论0 收藏0
Vue学习笔记（一）

摘要：一介绍也称为，读音类似，错误读音，由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令，这里详细学习一下事件的相关知识。还有一些其他键盘事件，具体参考官方文档。模板就是，用来进行数据绑定，显示在页面中，也称为语法。一、Vue.js介绍 Vue.js也称为Vue，读音类似view，错误读音v-u-e，由华人尤雨溪开源并维护。 Vue有以下特点：是一个构建用户界面的框架是一...

rollback 2019-08-01 17:49 评论0 收藏0
Vue 自定义指令

摘要：自定义指令定义直接看官网的介绍吧觉得官方文档说的很清楚了，所以我基本都是抄他的了。除了核心功能默认内置的指令和，也允许注册自定义指令。然而，有的情况下，你仍然需要对普通元素进行底层操作，这时候就会用到自定义指令。前言最近搞了毕设，需要实现一个场景，点击一块区域，弹出一个编辑区域，点击页面的其他地方的时候，这个编辑区域就隐藏，本想想之前写模态框一样写个方法的时候，突然showImg(...

you_De 2019-08-23 13:42 评论0 收藏0
vue自定义指令clickoutside扩展--多个元素的并集作为inside

摘要：指令中自定义的指令之一，顾名思义，就是当鼠标点击了指令所绑定元素的外部时，就会触发绑定方法。在鼠标放开触发事件处理时，通过获取到他们的对象。使用示例原来的使用方式不受影响，只是添加了多个元素并集作为的功能。指令中的参数学习都是个人理解，如果发现错误，恳请大家批评指正，谢谢。还有我说的会比较啰嗦，因为是以自身菜鸡水平的视角来记录学习理解的过程，见谅。 1.前言产品使用vue+elem...

ivan_qhz 2019-08-22 16:04 评论0 收藏0