给input框绑定一个focus事件,获取焦点时给全局绑定一个点击事件,判断下次点击的地方在不在输入框和下拉框内,不在则下拉框消失。记得清除这个点击事件。具体代码如下:
// 处理搜索框获取焦点
handleInputSearch () {
this.isOnSearch = true
document.addEventListener('click', this.listenClick)
},
listenClick (event) {
const e = event || window.event
// 判断点击的地方在不在输入框盒子内, contains判断dom节点的包含关系
if (this.$refs.searchBoxRef && !this.$refs.searchBoxRef.contains(e.target)){
this.isOnSearch = false
document.removeEventListener('click', this.listenClick)
}
}
效果图(和百度的差不多):
![](https://img-blog.csdnimg.cn/a0d47de4433a4d0ab133bd850b4a06c3.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5aSp6ams6KGM56m6enF6cQ==,size_19,color_FFFFFF,t_70,g_se,x_16)