场景

点击空白处时关闭某个打开的组件，比如一个dialog，再比如下拉框。当然，使用elementui就可以简单的完成这个需求，但是，项目中总有一些“合理”的需求，让我们只能东拼西凑的去使用elementui中的组件。

for example，我写下这篇记录的原因就是：我接到的需求elementui的select组件不能直接实现，所以我使用elementui的input组件和select组件的下拉框也就是option部分整合成了一个组件。脱离了select的option自然是不能点击空白处实现关闭的。

那怎么办，总不能让他一直打开着吧，那就只能手动实现咯。。。

实现

显示组件时设置监听点击函数

open() {
    document.addEventListener('click', this.close, false)
    this.visible = true;
},

关闭组件函数

close(e) {
    //判断点击的事件源不是从显示的组件内部触发的也不是从input触发的
    if (e.target.className !== 'el-select-dropdown__item' && !this.$refs.advanceInput.contains(e.target)) {
        this.visible = false
        this.removeListener()
    }
},

移除监听函数

removeListener() {
    document.removeEventListener('click', this.close, false)
},

补充：针对“判断点击的事件源不是从显示的组件内部触发的也不是从input触发的”，这个其实不用判断的那么复杂，只需要禁止点击事件冒泡即可，禁止冒泡之后就不会冒泡到document，自然也不会被document的click事件监听到

Vue 实现点击空白处关闭组件

场景

实现