详解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>

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

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

相关文章

  • JavaScript 抽奖效果实现代码 数字跳动版

    JavaScript 抽奖效果实现代码数字跳动版是一种比较常见的前端效果,实现的效果是抽奖过程中数字随机跳动,最终落定在某个数值上。下面是该效果的完整攻略,包括实现思路和代码示例。 实现思路 实现 JavaScript 抽奖效果实现代码数字跳动版的思路如下: 在 HTML 中设置一个数字显示区域。 在 JavaScript 中定义一个倒计时函数,每隔一定时间…

    JavaScript 2023年6月11日
    00
  • JavaScript Global 对象

    以下是关于JavaScript Global对象的完整攻略,包括两个示例说明。 JavaScript Global对象 JavaScript Global对象是一个全局对象,它包含了所有JavaScript程序都可以访问的属性和方法。在浏览器中,Global对象是window对象,而在Node.js中,Global对象是global对象。 下面是一些常用的J…

    JavaScript 2023年5月11日
    00
  • js数组去重的常用方法总结

    好,下面是关于“js数组去重的常用方法总结”的完整攻略。 js数组去重的常用方法总结 一、利用Set去重 ES6新增了Set容器,可以创建一个不重复的集合。因此,利用Set可以快速去重,代码如下: const arr = [1, 2, 3, 3, 4, 5, 4]; const result = Array.from(new Set(arr)); // [1…

    JavaScript 2023年5月27日
    00
  • 设置和读取cookie的javascript代码

    下面我将为您讲解设置和读取cookie的JavaScript代码完整攻略。 设置Cookie 要设置Cookie,我们可以使用document.cookie属性。该属性包含所有当前页面的Cookie。我们可以通过向document.cookie添加字符串来添加Cookie。 以下是添加单个Cookie的代码: // 设置一个名为 username 的 coo…

    JavaScript 2023年6月11日
    00
  • js数组去重常见的方法汇总(7种)

    下面我将详细讲解“js数组去重常见的方法汇总(7种)”。 一、引言 在JavaScript的实际开发中,经常会遇到需要对数组进行去重操作的情况。而JavaScript提供了多种方法来进行数组去重操作,下面将详细介绍七种常见的方法。 二、使用Set Set是ES6新引入的一种集合数据类型,它可以存储任意类型的唯一值。使用Set可以很方便地实现数组去重,只需要将…

    JavaScript 2023年5月27日
    00
  • asp.net中使用cookie传递参数的方法

    针对“asp.net中使用cookie传递参数的方法”,我将分为以下几个部分进行说明: 什么是cookie? 如何创建cookie? 如何读取cookie? 如何删除cookie? 使用cookie传递参数的示例 什么是cookie? cookie是一种用于存储浏览器访问网站时的小文件。当用户访问一个网站,服务器会将cookie文件存储到用户的计算机上,当用…

    JavaScript 2023年6月11日
    00
  • JavaScript函数节流和函数防抖之间的区别

    JavaScript函数节流和函数防抖是前端开发中常用的优化技巧,本文将对这两种技巧进行详细讲解,并且给出具体的示例说明。 什么是函数节流? 函数节流是指在一定时间内,无论事件被触发了多少次,都只会执行一次函数。常见的应用场景包括: 滚动加载页面时,用户快速滑动页面,避免频繁触发事件,降低页面性能。 窗口大小改变时,频繁触发事件,限制事件触发次数,保证事件响…

    JavaScript 2023年6月10日
    00
  • JavaScript SetInterval与setTimeout使用方法详解

    JavaScript SetInterval与setTimeout使用方法详解 SetInterval 语法 setInterval(function, delay, param1, param2, …) 参数 function:必需。要调用的函数或代码串。 delay:必需。该函数调用之间的时间间隔(以毫秒计)。 param1、param2和更多参数:…

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