VUe如何监听当前区域外的点击事件？（ClickOutside点击当前区域之外的位置）

一、首先需要用到ElementUI里面的ClickOutside自定义指令（如果已安装可以调到第二步）

1.安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

2.引入

引入 Element

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

具体方法查看Element快速上手

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN/component/quickstart

二、导入

import clickoutside from 'element-ui/src/utils/clickoutside';

三、映射

  directives: { clickoutside },

四、绑定自定义指令

<div v-clickOutside="handler">
    text
</div>

五、编写逻辑

 handler() {
      console.log('text以外的区域被点击了')
    }

六、全部代码

<template>
  <div>
    <div v-clickoutside="handler">text</div>
  </div>
</template>
 
<script>
import clickoutside from "element-ui/src/utils/clickoutside";
export default {
  directives: { clickoutside },
  data() {
    return {};
  },
  created() {},
  methods: {
    handler() {
      console.log("text以外被点击了");
    },
  },
};
</script>