1.因为el-input 没有点击input以外的事件
2.所以应该用自定义指令来实现,下拉是否显示还是隐藏
3.判断是否点击的是input,如果点击input以外的地方都隐藏,点击input显示
简单想应该怎么实现?
1、肯定是给document增加一个click事件监听
2、当发生click事件的时候判断是否点击的当前对象
结合着本思路和指令咱们来实现。
简单介绍vue指令
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。
直接上代码
写在export default上面
const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {
function documentHandler(e) {
// 这里判断点击的元素是否是本身,是本身,则返回
if (el.contains(e.target)) {
return false;
}
// 判断指令中是否绑定了函数
if (binding.expression) {
// 如果绑定了函数 则调用那个函数,此处binding.value就是handleClose方法
binding.value(e);
}
}
// 给当前元素绑定个私有变量,方便在unbind中可以解除事件监听
el.__vueClickOutside__ = documentHandler;
document.addEventListener('click', documentHandler);
},
update() {},
unbind(el, binding) {
// 解除事件监听
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};
data里面写
show: true, //默认是显示的
data下面写 directives: { clickoutside },注册
methods: {
handleClose(e) {
var myPanel = document.getElementById('myPanel')// 得到点击出现的节点(input)
if (myPanel) {
this.show = true// 有改节点的时候,显示,解决第二次点击openAddress按钮出现的bug
if (!(myPanel.contains(e.target))) { // 这句是说如果我们点击到了id为myPanel以外的区域,为false
this.show = false// 消失
}
}
},
html结构
搜索一下
这个是否显示
历史记录
{{item.vocabulary}}
点击每一项历史记录的时候历史记录下拉框消失
//点击历史记录每个点击事件,值付给input
itemHistory(vocabulary){
this.searchKey=vocabulary
this.show=false;
this.search() //搜索接口
},