点击空白关闭弹窗

Posted 2023-03-16

参考技术A 点击空白处关闭弹窗是常见的网页效果，其实它的实现原理很简单，就是全局监听一个点击事件，当监听到用户点击时，判断 target 元素是否在弹窗内，如果是，则不关闭弹窗(点击了关闭按钮例外)，否则关闭弹窗。但需要注意一点，当弹窗显示时，才需要监听用户的点击事件，弹窗关闭时，需要及时撤销监听函数。本文介绍两种实现方式，供大家参考学习。

template

script

template

script

在 bind 方法里添加点击事件监听器，而在 unbind 里撤销监听器。值得注意的是， unbind 只有在元素与指令解绑时(比如元素销毁)才会调用一次，所以弹窗必须用 v-if 而不是 v-show ，因为 v-show 只会隐藏元素，不会真正销毁元素。