资讯专栏INFORMATION COLUMN

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

Youngs / 2898人阅读

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

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

觉得可以尝试用 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学习笔记(一)

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

    baoxl 评论0 收藏0
  • Vue学习笔记(一)

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

    liukai90 评论0 收藏0
  • Vue学习笔记(一)

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

    rollback 评论0 收藏0
  • Vue 定义指令

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

    you_De 评论0 收藏0
  • vue定义指令clickoutside扩展--多个元素的并集作为inside

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

    ivan_qhz 评论0 收藏0

发表评论

0条评论

Youngs

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<