【Vue】自定义指令 - 点击当前区域外

<template>
  <div>
    <div v-click-outside="onClickOutside" class="box">
      点击内容外区域会触发事件
    </div>
  </div>
</template>

<script setup>
// 定义自定义指令 v-click-outside
const vClickOutside = {
  mounted(el, binding) {
    function eventHandler(e) {
      if (el.contains(e.target)) {
        return false
      }
      // 如果绑定的参数是函数，则执行
      if (binding.value && typeof binding.value === "function") {
        binding.value(e)
      }
    }
    // 用于销毁前注销事件监听
    el.__click_outside__ = eventHandler
    // 添加事件监听
    document.addEventListener("click", eventHandler)
  },
  beforeUnmount(el) {
    // 移除事件监听
    document.removeEventListener("click", el.__click_outside__)
    // 删除无用属性
    delete el.__click_outside__
  },
}

// 定义点击外部区域的处理函数
const onClickOutside = () => {
  console.log("点击了外部 DOM")
}
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  text-align: center;
  line-height: 200px;
}
</style>