Vue3 实现自定义指令点击空白区域关闭下拉框

一、封装 v-click-outside

在utils文件夹下面创建clickOutside.ts：

import type { DirectiveBinding } from 'vue'type ClickOutsideEl = HTMLElement & {__clickOutsideHandler__?: (e: MouseEvent) => void
}const clickOutside = {mounted(el: ClickOutsideEl, binding: DirectiveBinding) {el.__clickOutsideHandler__ = (e: MouseEvent) => {if (el.contains(e.target as Node)) returnbinding.value(e)}document.addEventListener('click', el.__clickOutsideHandler__)},unmounted(el: ClickOutsideEl) {if (el.__clickOutsideHandler__) {document.removeEventListener('click', el.__clickOutsideHandler__)delete el.__clickOutsideHandler__}}
}export default clickOutside

二、在main.ts里全局注册：

import { createApp } from 'vue'
import App from './App.vue'
import clickOutside from './utils/clickOutside'const app = createApp(App)// 全局注册指令
app.directive('click-outside', clickOutside)app.mount('#app')

三、使用示例

<template><div class="dropdown" v-click-outside="handleClose"><button @click="isOpen = !isOpen">切换菜单</button><ul v-if="isOpen" class="menu"><li>选项1</li><li>选项2</li><li>选项3</li></ul></div>
</template><script setup lang="ts">
import { ref } from 'vue'const isOpen = ref(false)const handleClose = () => {isOpen.value = false
}
</script>