摘要:前置知识既然要用的自定义指令,那么肯定要了解一下自定义指令的相关知识啦,关于这部分的内容,看我之前写过的自定义指令或者直接看官方文档就可以啦,这里我就不再多讲了。
前言 最近搞了毕设,需要实现一个场景,点击一块区域,弹出一个编辑区域,点击页面的其他地方的时候,这个编辑区域就隐藏,本想想之前写模态框一样写个方法的时候,突然
觉得可以尝试用 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},
接下来就可以就可以在组件内直接使用啦
我实现的效果
然后关于这个点击元素外触发某个事件,如果还有啥其他优雅的方式的话,下面留言分享一下哈。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/99483.html
摘要:一介绍也称为,读音类似,错误读音,由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令,这里详细学习一下事件的相关知识。还有一些其他键盘事件,具体参考官方文档。模板就是,用来进行数据绑定,显示在页面中,也称为语法。 一、Vue.js介绍 Vue.js也称为Vue,读音类似view,错误读音v-u-e,由华人尤雨溪开源并维护。 Vue有以下特点: 是一个构建用户界面的框架 是一...
摘要:一介绍也称为,读音类似,错误读音,由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令,这里详细学习一下事件的相关知识。还有一些其他键盘事件,具体参考官方文档。模板就是,用来进行数据绑定,显示在页面中,也称为语法。 一、Vue.js介绍 Vue.js也称为Vue,读音类似view,错误读音v-u-e,由华人尤雨溪开源并维护。 Vue有以下特点: 是一个构建用户界面的框架 是一...
摘要:一介绍也称为,读音类似,错误读音,由华人尤雨溪开源并维护。隐藏四事件之前说了一些关于事件的指令,这里详细学习一下事件的相关知识。还有一些其他键盘事件,具体参考官方文档。模板就是,用来进行数据绑定,显示在页面中,也称为语法。 一、Vue.js介绍 Vue.js也称为Vue,读音类似view,错误读音v-u-e,由华人尤雨溪开源并维护。 Vue有以下特点: 是一个构建用户界面的框架 是一...
摘要:指令中自定义的指令之一,顾名思义,就是当鼠标点击了指令所绑定元素的外部时,就会触发绑定方法。在鼠标放开触发事件处理时,通过获取到他们的对象。使用示例原来的使用方式不受影响,只是添加了多个元素并集作为的功能。指令中的参数学习 都是个人理解,如果发现错误,恳请大家批评指正,谢谢。还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅。 1.前言 产品使用vue+elem...
阅读 2435·2021-09-09 09:33
阅读 2810·2019-08-30 15:56
阅读 3089·2019-08-30 14:21
阅读 847·2019-08-30 13:01
阅读 802·2019-08-26 18:27
阅读 3554·2019-08-26 13:47
阅读 3423·2019-08-26 10:26
阅读 1537·2019-08-23 18:38