详解Element 指令clickoutside源码分析

详解Element 指令clickoutside源码分析攻略

简介

这篇攻略将详细介绍Element UI库中使用的指令clickoutside的源码实现。常常需要在页面中对元素执行点击外部关闭操作,这种需求就可以通过clickoutside指令来实现。

环境

本篇攻略基于Vue.js和Element UI库实现。

功能

clickoutside指令的主要功能是用于监听元素外面的点击事件,从而可以实现定义点击元素外面的区域时关闭某些DOM节点。

使用方式

clickoutside指令的使用方式为:

<div v-clickoutside="handler"></div>

注意:需要在Vue实例的directives属性中全局注册这个指令。

实现原理

clickoutside指令本质上是一个Vue自定义指令,其主要实现在src/directives/clickoutside.js中。该指令主要实现了下面两个功能:

  1. 监听元素外部的鼠标点击事件
  2. 触发绑定到该指令的方法

监听鼠标点击事件

clickoutside指令的核心功能是监听鼠标点击事件,并决定是否触发相关的事件。监听外部点击事件的原理是通过事件冒泡来实现的,包括以下几个步骤:

  1. 给需要监听的元素添加一个mousedown事件,当这个函数被触发时,会对document添加一个mouseup事件,同时记录鼠标点击时的target。
  2. 当触发mouseup事件时,会先判断点击目标是否是当前元素或其子元素,如果是,则不做任何处理;如果不是,则触发绑定的函数。
  3. 在监听mousemove和mouseup事件期间,需要同时监听document的mouseleave事件,当鼠标移除document时,会触发mouseup事件。

基本代码实现如下:

function bind(el, binding, vnode) {
  const documentHandler = function (e) {
    if (el.contains(e.target)) {
      return false;
    }
    if (binding.expression) {
      binding.value(e);
    }
  };
  el.__vueClickOutside__ = documentHandler;
  document.addEventListener('mousedown', documentHandler);
}

然而,由于鼠标事件的特性,在某些情况下,以上实现会出现一些问题。

  1. mousedown事件会被触发两次
    1. 当外部点击第一个元素时,会触发mousedown事件
    2. 当外部点击第二个元素时,此时外部元素已经被替换了,所以外部元素的mousedown事件会再次触发
  2. 在VPopper组件中,弹出VPopper后,由于弹出框是在外部的,所以会导致VPopper组件的mousedown事件不会被触发,无法正确关闭组件

针对这些问题,clickoutside指令使用了一些技巧来解决。

  1. 在mousedown事件发生时,对于新创建的弹出框元素,需要将其加入到被监听元素列表中,同时将所有监听的元素加入到另一个列表中。并在mouseup时遍历这个列表,判断是否需要触发事件。
  2. 当弹出框出现时,判断鼠标点击的目标是否在被监听元素列表中,如果是,则直接终止后续触发操作。

修正后的代码如下:

function bind(el, binding, vnode) {
  const documentHandler = function (e) {
    if (vnode.context && !vnode.context.popperElm.contains(e.target) && el !== e.target && !el.contains(e.target)) {
      vnode.context[el.__vueClickOutside__].call(null, e);
    }
  };
  el.__vueClickOutside__ = documentHandler;
  binding.def.addEvent(document.documentElement, 'mousedown', documentHandler);
}

const addEvent = function (el, event, handler) {
  if (el.addEventListener) {
    return el.addEventListener(event, handler, false);
  }
  if (el.attachEvent) {
    return el.attachEvent('on' + event, handler);
  }
  el['on' + event] = handler;
};

示例

示例1:使用clickoutside关闭菜单

在菜单弹出框外部时,点击后应该关闭弹出框。

<template>
  <div>
    <el-button type="primary" @click="showMenu = !showMenu">点击弹出菜单</el-button>
    <el-dropdown :show-menu.sync="showMenu" v-clickoutside="handleClose">
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="item in list" :key="item">{{ item }}</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        showMenu: false,
        list: ['选项一', '选项二', '选项三']
      };
    },
    methods: {
      handleClose() {
        this.showMenu = false;
      }
    }
  };
</script>

示例2:在VPopper组件中使用clickoutside

在VPopper弹框外部时,点击后应该关闭弹框。

<template>
  <div>
    <el-button ref="trigger" type="primary" @click="visible = !visible">点击弹出弹框</el-button>
    <el-popover ref="popover" v-model="visible" v-clickoutside="handleClose">
      <p>这里是弹框的内容</p>
      <p>这里是弹框的内容</p>
      <p>这里是弹框的内容</p>
      <p>这里是弹框的内容</p>
      <p>这里是弹框的内容</p>
    </el-popover>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false
      };
    },
    methods: {
      handleClose() {
        this.visible = false;
      }
    },
    mounted() {
      //调用VPopper的方法,将弹框内容插入到body元素中,弹框外的元素由于组件弹框的位置而被替换
      this.$refs.popover.doDestroy = function () {
        this.$el.parentNode.removeChild(this.$el);
        this.$destroy();
      };
      this.$refs.popover.popperElm = this.$refs.popover.$el;
      document.body.appendChild(this.$refs.popover.$el);
    }
  };
</script>
阅读剩余 73%

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:详解Element 指令clickoutside源码分析 - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • JavaScript 函数语法详解

    JavaScript 函数语法详解 在JavaScript中,函数也被称为一等公民,因为它们可以像任何其他值(数字,字符串等)一样进行操作。函数可以接受参数和返回值,并且可以在任何位置声明或调用。下面是JavaScript函数的语法: function functionName(parameters) { // 函数体 return returnValue;…

    JavaScript 2023年5月18日
    00
  • django admin 使用SimpleUI自定义按钮弹窗框示例

    下面是“django admin 使用SimpleUI自定义按钮弹窗框示例”的完整攻略以及其中的两个示例说明。 1. 什么是SimpleUI SimpleUI是一个漂亮的开源后台管理系统框架,提供了众多易于扩展和修改的组件和插件,能够使开发者快速开发高效的后台管理系统。 2. 使用SimpleUI自定义按钮弹窗框示例 在django admin中,我们可以利…

    JavaScript 2023年6月11日
    00
  • 详解JS模块导入导出

    下面是详解JS模块导入导出的完整攻略。 什么是模块 在JavaScript中,模块(Module)指的是一个独立的、可复用的代码块,类似于传统的库(Library)。模块的引入可以将一个大的代码块分成多个小的代码块,这样便于结构化编程、提高代码复用性、隔离变量作用域等。 模块的导入导出 JavaScript中的模块可通过导入导出机制实现模块间的代码共享。 导…

    JavaScript 2023年5月27日
    00
  • 在javascript将NodeList作为Array数组处理的方法

    将NodeList作为Array数组处理的方法是在javascript中非常有用的技巧之一。在许多情况下,获得的是NodeList类型的HTML元素集合,我们可能需要对集合进行操作,比如对集合进行排序,筛选等。然而,NodeList不是真正的数组类型,它缺少数组类型的操作和方法。幸运的是,我们可以使用一些技巧将NodeList转换为以进行操作的数组。 在ja…

    JavaScript 2023年5月27日
    00
  • JS获取html元素的标记名实现方法

    获取 HTML 元素标记名是 JavaScript 中常用的操作,以下是实现方法的详细攻略: 1. 使用 tagName 属性获取标记名 可以使用 tagName 属性来获取 HTML 元素的标记名。该属性只能用于 DOM 对象,对于文本节点和注释节点是无效的。 示例代码如下: // 获取某个元素的标记名 const element = document.g…

    JavaScript 2023年6月10日
    00
  • WEB 浏览器兼容 推荐收藏

    下面是关于WEB浏览器兼容推荐收藏的完整攻略。 什么是WEB 浏览器兼容? WEB浏览器兼容是指一种 WEB 站点可被多种浏览器在不同操作系统环境下展现,且表现基本一致的能力。WEB的兼容性是 WEB 应用开发中最为重要的成果之一,无论是在美观还是用户体验上都占据重要地位。 为什么需要WEB 浏览器兼容? 随着不同操作系统和不同版本的浏览器的出现,WEB 在…

    JavaScript 2023年6月10日
    00
  • 在JavaScript中如何解决用execCommand(

    在JavaScript中,可以使用execCommand()方法来执行一些富文本编辑操作,如加粗、斜体、插入链接等。下面是一些解决execCommand()的方法以及示例说明。 方法一:使用document.execCommand() 使用document.execCommand()方法可以直接执行一些富文本编辑操作,如下示例代码演示了如何在文本框中插入一段…

    JavaScript 2023年6月11日
    00
  • 关于JavaScript中string 的replace

    下面是关于JavaScript中string的replace的详细攻略。 什么是replace replace() 方法是 JavaScript 中的字符串方法,它用于在字符串中查找一个指定的子串,并用另一个字符串替换它。这个替换过程是不影响原字符串,而是产生一个新的字符串。 replace() 方法接收两个参数:第一个是需要查找的子串或正则表达式,第二个是…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部