在vue中根据光标的显⽰与消失实现下拉列表
重点知识
mousedown事件：mousedown的执⾏顺序⼤于blur事件
HTML代码
<template>
<div>
<input ref="search" @focus="showList(true)" v-model="search" @blur="showList(false)"/>
<ul v-if="state">
<li @mousedown="handleSearch(1)">1</li>
<li @mousedown="handleSearch(2)">2</li>
<li @mousedown="handleSearch(3)">3</li>
<li @mousedown="handleSearch(4)">4</li>
</ul>
</div>
</template>
通过上⾯的代码⽣成了我们的基本下拉列表，接下来是data数据的解析：
data() {
return {
search: '',//搜索框值
state: false,//是否显⽰下拉列表
isShowList: false,//判断是点击内容隐藏光标的，还是点击空⽩隐藏光标的
}
blur事件},
详细函数解析：
//显⽰光标和失去光标事件
showList(state) {//state⽤于判断是否是得到光标事件还是失去光标事件
if (state) {
this.state = state//显⽰下拉列表
} else {
if(this.isShowList){//this.isShowList⽤于判断是否是下拉列表⾥的内容点击的事件
//把this.isShowList赋值为false让点击空⽩区能再次触发失去光标事件
this.isShowList = false
//让input⼀直都有光标事件
this.$refs.search.focus()
}else {
this.state = state //隐藏下拉框
}
}
},
handleSearch(data) {//data搜索的数据
this.search = data//赋值
this.isShowList = true//这是区别是否是内容区的点击事件
}
详细过程
1. 点击input标签触发showList(true)⽅法，有它是true直接执⾏ this.state = state//显⽰下拉列表
2. 点击下拉框内容触发handleSearch(data)⽅法把 this.isShowList = true 标注这是在下拉框内容的点击事件，将不会隐藏
下拉框
3. 最后通过blur触发showList(false)，他将根据this.isShowList判断是否隐藏下拉框，当this.isShowList是true时，执⾏
this.isShowList = false 把this.isShowList回复原样，让点击空⽩区也能隐藏下拉框，
4. this.$refs.search.focus()让input再次获得光标事件，这将为点击空⽩区能触发失去光标事件让下拉框隐藏起来
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。