抽离ElementUI源码的clickoutside全局指令

最新推荐文章于 2025-06-18 13:25:45 发布

happy任

最新推荐文章于 2025-06-18 13:25:45 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： javascipt 文章标签：点击空白处 elementui源码点空白处隐藏 js事件绑定 js闭包

本文链接：https://blog.youkuaiyun.com/qq_24182885/article/details/88692047

本文探讨如何从ElementUI框架中提取clickoutside全局指令，详细介绍了clickoutside.js和dom.js的实现，利用闭包实现点击元素外部区域触发事件的功能。此指令常用于点击空白处关闭对话框或下拉框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

ElementUI是一款基于Vue的前端优秀开源组件，其框架内部的许多工具都是非常优秀，而且好用的，本文将从中抽离出该框架中的1个非常实用的全局指令。

二、正文

1、clickoutside.js //点击被插入该指令的元素外的任意空白处，触发指令所绑定的方法。

import Vue from 'vue';
import { on } from 'element-ui/src/utils/dom';

const nodeList = [];
const ctx = '@@clickoutsideContext';

let startClick;
let seed = 0;

!Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e));

!Vue.prototype.$isServer && on(document, 'mouseup', e => {
  nodeList.forEach(node => node[ctx].documentHandler(e, startClick));
});

function createDocumentHandler(el, binding, vnode) {
  return function(mouseup = {}, mousedown = {}) {
    if (!vnode ||
      !vnode.context ||
      !mouseup.target ||
      !mousedown.target ||
      el.contains(mouseup.target) ||
      el.contains(mousedown.target) ||
      el === mouseup.target ||
      (vnode.context.popperElm &&
      (vnode.co