下面是两种常见的模态框的实现方式方案一:默认 click 都是放在冒泡阶段,只要在内容区域上添加 click 的阻止冒泡即可方案二:通过代码判断点击触发的 DOM 是否在内容区域内上面的代码可以解决全屏的模态框点击外部区域关闭。如果多个组件需要实现这点击外部区域关闭的效果,可以通过 Vue 的指令来进行封装实现弹窗实现弹出指令代码的具体内容如下。有一点比较难受的是指令里面没有地方能存放变量,只好把把这些变量放到了 DOM 上了。还有就是在使用的时候要加上

Vue指令实现OutClick的示例

Vue指令实现OutClick的示例

Vue指令实现OutClick的示例