在vue中根據(jù)光標(biāo)的顯示與消失實現(xiàn)下拉列表
重點知識
mousedown事件:mousedown的執(zhí)行順序大于blur事件
HTML代碼
<template> <div> <input ref="search" @focus="showList(true)" v-model="search" @blur="showList(false)"/> <ul v-if="state"> <li style="width: 100px;background: goldenrod;color: #fff" @mousedown="handleSearch(1)">1</li> <li style="width: 100px;background: goldenrod;color: #fff" @mousedown="handleSearch(2)">2</li> <li style="width: 100px;background: goldenrod;color: #fff" @mousedown="handleSearch(3)">3</li> <li style="width: 100px;background: goldenrod;color: #fff" @mousedown="handleSearch(4)">4</li> </ul> </div> </template>
通過上面的代碼生成了我們的基本下拉列表,接下來是data數(shù)據(jù)的解析:
data() { return { search: '',//搜索框值 state: false,//是否顯示下拉列表 isShowList: false,//判斷是點擊內(nèi)容隱藏光標(biāo)的,還是點擊空白隱藏光標(biāo)的 } },
詳細(xì)函數(shù)解析:
//顯示光標(biāo)和失去光標(biāo)事件 showList(state) {//state用于判斷是否是得到光標(biāo)事件還是失去光標(biāo)事件 if (state) { this.state = state//顯示下拉列表 } else { if(this.isShowList){//this.isShowList用于判斷是否是下拉列表里的內(nèi)容點擊的事件 //把this.isShowList賦值為false讓點擊空白區(qū)能再次觸發(fā)失去光標(biāo)事件 this.isShowList = false //讓input一直都有光標(biāo)事件 this.$refs.search.focus() }else { this.state = state //隱藏下拉框 } } }, handleSearch(data) {//data搜索的數(shù)據(jù) this.search = data//賦值 this.isShowList = true//這是區(qū)別是否是內(nèi)容區(qū)的點擊事件 }
詳細(xì)過程
- 點擊input標(biāo)簽觸發(fā)showList(true)方法,有它是true直接執(zhí)行 this.state = state//顯示下拉列表
- 點擊下拉框內(nèi)容觸發(fā)handleSearch(data)方法 把 this.isShowList = true 標(biāo)注這是在下拉框內(nèi)容的點擊事件,將不會隱藏下拉框
- 最后通過blur觸發(fā)showList(false),他將根據(jù)this.isShowList判斷是否隱藏下拉框,當(dāng)this.isShowList是true時,執(zhí)行this.isShowList = false 把this.isShowList回復(fù)原樣,讓點擊空白區(qū)也能隱藏下拉框,
- this.$refs.search.focus()讓input再次獲得光標(biāo)事件,這將為點擊空白區(qū)能觸發(fā)失去光標(biāo)事件讓下拉框隱藏起來
參考:http://www.dbjr.com.cn/article/171151.htm
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件
在開發(fā)中如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進(jìn)行上傳,將各個文件的切片傳遞給后臺,然后后臺再進(jìn)行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下2023-01-01詳解vue-cli4 配置不同開發(fā)環(huán)境打包命令
這篇文章主要介紹了vue-cli4 配置不同開發(fā)環(huán)境打包命令,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07Vue中slot-scope的深入理解(適合初學(xué)者)
這篇文章主要給大家介紹了關(guān)于Vue中slot-scope的深入理解,這個教程非常適合初學(xué)者,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04在Vue中進(jìn)行數(shù)據(jù)分頁的實現(xiàn)方法
在前端開發(fā)中,數(shù)據(jù)分頁是一個常見的需求,特別是當(dāng)處理大量數(shù)據(jù)時,Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來實現(xiàn)數(shù)據(jù)分頁,本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁,以及如何設(shè)計一個通用的分頁組件,需要的朋友可以參考下2023-10-10vuex中store存儲store.commit和store.dispatch的用法
這篇文章主要介紹了vuex中store存儲store.commit和store.dispatch的用法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue3全局屬性app.config.globalProperties的實現(xiàn)
Vue3中的app.config.globalProperties是一個強(qiáng)大的全局配置功能,允許我們在應(yīng)用級別設(shè)置和訪問屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-01-01