vue2/3点击区域外触发方法(超简单，秒会)

Vue2

第一步：写自定义指令

// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function (event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法
        binding.value(event);
      }
    };
    // 在文档上添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener("click", el.clickOutsideEvent);
  },
};

第二步：将指令绑定在vue上

export default{
	directives: {
    "click-outside": clickOutside, // 注册自定义指令
  },
}

完整代码

<template>
  <div class="container">
    <div v-click-outside="handleBlur">
      当点击该元素以外的地方时，将触发handleBlur方法
    </div>
  </div>
</template>
<script>
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function (event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event);
      }
    };
    // 在文档上添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener("click", el.clickOutsideEvent);
  },
};
export default {
  directives: {
    "click-outside": clickOutside, // 注册自定义指令
  },
  name: "test",
  data() {
    return {};
  },
  methods: {
    //点击其它区域
    handleBlur(event) {
      console.log("点击其它区域啦",event);
    },
  },
  created() {},
  mounted() {},
};
</script>
<style scoped>
.container {
}
</style>

此时，点击绑定该方法外的区域就会触发该方法啦。全局注册指令的话用起来更方便，不用再用原生单独一个个绑定了。

Vue3

因为在 Vue 3 的自定义指令中，生命周期钩子函数的命名和用法已经发生了变化。Vue 3 引入了新的生命周期钩子函数，取代了 Vue 2 中的 bind 和 unbind，所以自定义指令部分v3和v2的写法不一样。下面是v3的自定义指令部分，和v3的整体代码。

自定义指令

// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  beforeMount(el, binding) {
    // 在元素上绑定一个事件监听器
    el.clickOutsideEvent = function (event) {
      // 判断点击事件是否发生在元素外部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果是外部点击，则执行绑定的函数
        binding.value(event);
      }
    };
    // 在全局添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unmounted(el) {
    // 在组件销毁前，移除事件监听器以避免内存泄漏
    document.removeEventListener("click", el.clickOutsideEvent);
  },
};

将指令绑定在vue上(和v2一致)

export default{
	directives: {
    "click-outside": clickOutside, // 注册自定义指令
  },
}

完整代码

<template>
  <div class="container">
    <div v-click-outside="handleBlur">
      当点击该元素以外的地方时，将触发handleBlur方法
    </div>
  </div>
</template>
  <script>
// 自定义指令，用于处理点击外部区域的事件
const clickOutside = {
  beforeMount(el, binding) {
    // 在元素上绑定一个事件监听器
    el.clickOutsideEvent = function (event) {
      // 判断点击事件是否发生在元素外部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果是外部点击，则执行绑定的函数
        binding.value(event);
      }
    };
    // 在全局添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unmounted(el) {
    // 在组件销毁前，移除事件监听器以避免内存泄漏
    document.removeEventListener("click", el.clickOutsideEvent);
  },
};
export default {
  directives: {
    "click-outside": clickOutside, // 注册自定义指令
  },
  name: "test",
  data() {
    return {};
  },
  methods: {
    //点击其它区域
    handleBlur(event) {
      console.log("点击其它区域啦", event);
    },
  },
  created() {},
  mounted() {},
};
</script>
  <style scoped>
.container {
}
</style>
  

代码有问题或者有更好的方法欢迎各位大佬在评论区指教哈～