溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
重點知識
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,//判斷是點擊內容隱藏光標的，還是點擊空白隱藏光標的
}
},
詳細函數解析：
//顯示光標和失去光標事件
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//這是區別是否是內容區的點擊事件
}
詳細過程
參考：https://www.jb51.net/article/171151.htm
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
