Vue指令实现OutClick的示例
程序员文章站
2022-03-20 18:47:09
原始实现下面是两种常见的模态框的实现方式方案一:默认 click 都是放在冒泡阶段,只要在内容区域上添加 click 的阻止冒泡即可方案二:通过代码判断点击触发的 dom 是否在内容区域内指令实现上面...
原始实现
下面是两种常见的模态框的实现方式
方案一:默认 click 都是放在冒泡阶段,只要在内容区域上添加 click 的阻止冒泡即可
方案二:通过代码判断点击触发的 dom 是否在内容区域内
指令实现
上面的代码可以解决全屏的模态框点击外部区域关闭。但是还有一种 pop 的弹出,这种弹出的外部区域不在本组件内,想要实现这种弹出的点击外部区域关闭用上面的方式二也是可以的,只需把 mounted 阶段把 handleclick 事件添加到 body,在 beforedestroy 上解绑 body 上的点击时间就就可以了。
如果多个组件需要实现这点击外部区域关闭的效果,可以通过 vue 的指令来进行封装
实现弹窗
实现弹出
指令代码的具体内容如下。有一点比较难受的是指令里面没有地方能存放变量,只好把把这些变量放到了 dom 上了。还有就是在使用的时候要加上v-
的前缀,指令的名字不用带上v-
以上就是vue指令实现outclick的示例的详细内容,更多关于vue指令实现outclick的资料请关注其它相关文章!