Vue指令实现OutClick的示例

原始实现

下面是两种常见的模态框的实现方式

方案一：默认 click 都是放在冒泡阶段，只要在内容区域上添加 click 的阻止冒泡即可

方案二：通过代码判断点击触发的 dom 是否在内容区域内

指令实现

上面的代码可以解决全屏的模态框点击外部区域关闭。但是还有一种 pop 的弹出，这种弹出的外部区域不在本组件内，想要实现这种弹出的点击外部区域关闭用上面的方式二也是可以的，只需把 mounted 阶段把 handleclick 事件添加到 body，在 beforedestroy 上解绑 body 上的点击时间就就可以了。

如果多个组件需要实现这点击外部区域关闭的效果，可以通过 vue 的指令来进行封装

实现弹窗

实现弹出

指令代码的具体内容如下。有一点比较难受的是指令里面没有地方能存放变量，只好把把这些变量放到了 dom 上了。还有就是在使用的时候要加上v-的前缀，指令的名字不用带上v-

以上就是vue指令实现outclick的示例的详细内容，更多关于vue指令实现outclick的资料请关注其它相关文章！