核心是监听全局点击判断是否点在绑定元素外：mounted绑定document click事件，用el.contains()检测目标，false则执行binding.value()；支持exclude选择器排除按钮；teleport下仍有效；推荐capture阶段监听防拦截。
核心是监听全局点击，判断目标是否在绑定元素及其子节点之外，再触发关闭逻辑。关键不在“点哪”，而在“没点中它”。
指令怎么写：基础版结构
用 mounted 绑定 document 的 click 事件，用 unmounted 清除它，避免内存泄漏：
- 在 mounted 中定义 handler 函数，用
el.contains(event.target)判断点击是否落在弹窗内部 - 如果返回 false，说明点在外面，就执行
binding.value() - 把 handler 存到
el.__handler__这类私有属性上，确保 unmounted 时能精准移除 - 不要用匿名函数直接传给 addEventListener，否则无法解绑
怎么支持排除某些按钮不触发关闭
真实场景里，“取消”“确认”按钮点了不该关弹窗，得跳过：
- 指令值支持对象写法，比如
v-click-outside="{ exclude: '.btn-cancel, .btn-confirm' }" - handler 里加一层判断：
if (event.target.matches(binding.value.exclude)) return - 也可以简化成布尔值用法：
v-click-outside="handleClose"，此时 binding.value 就是函数
Teleport 场景下还管用吗
Element Plus、Ant Design Vue 等库的弹窗常通过 Teleport 渲染到 body 底下，但 el.contains() 依然有效：
- 它检查的是 DOM 树包含关系，不是视觉位置，所以无需额外适配
- 只要指令绑定在弹窗最外层的真实 DOM 元素上（比如 class="modal" 的 div），就能正确识别
- 若用 ref 动态获取 el，建议配合
nextTick确保 el 已挂载，避免为 null
为什么推荐用 capture 阶段监听
默认事件冒泡阶段可能被中间元素 stopPropagation 或 disabled 元素拦截，导致失效：
- 把
addEventListener('click', handler, true)第三个参数设为 true，走捕获阶段 - 这样即使弹窗里有 disabled 按钮或 shadow DOM，也能稳稳捕获点击
- 同时配合
e.composedPath().includes(el)可进一步兼容 Portal 和 Web Components
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
