快捷導(dǎo)航

在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表

更新時(shí)間：2019年09月29日 11:35:57 作者：czrgit

這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實(shí)現(xiàn)下拉列表，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

重點(diǎn)知識(shí)

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>

通過(guò)上面的代碼生成了我們的基本下拉列表，接下來(lái)是data數(shù)據(jù)的解析：

data() {
   return {
    search: '',//搜索框值
    state: false,//是否顯示下拉列表
    isShowList: false,//判斷是點(diǎn)擊內(nèi)容隱藏光標(biāo)的，還是點(diǎn)擊空白隱藏光標(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)容點(diǎn)擊的事件
      //把this.isShowList賦值為false讓點(diǎn)擊空白區(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ū)的點(diǎn)擊事件
   }

詳細(xì)過(guò)程

點(diǎn)擊input標(biāo)簽觸發(fā)showList(true)方法，有它是true直接執(zhí)行 this.state = state//顯示下拉列表
點(diǎn)擊下拉框內(nèi)容觸發(fā)handleSearch(data)方法把 this.isShowList = true 標(biāo)注這是在下拉框內(nèi)容的點(diǎn)擊事件，將不會(huì)隱藏下拉框
最后通過(guò)blur觸發(fā)showList(false),他將根據(jù)this.isShowList判斷是否隱藏下拉框，當(dāng)this.isShowList是true時(shí)，執(zhí)行this.isShowList = false 把this.isShowList回復(fù)原樣，讓點(diǎn)擊空白區(qū)也能隱藏下拉框，
this.$refs.search.focus()讓input再次獲得光標(biāo)事件，這將為點(diǎn)擊空白區(qū)能觸發(fā)失去光標(biāo)事件讓下拉框隱藏起來(lái)

參考：http://www.dbjr.com.cn/article/171151.htm

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件
在開(kāi)發(fā)中如果上傳的文件過(guò)大,可以考慮分片上傳,分片就是說(shuō)將文件拆分來(lái)進(jìn)行上傳,將各個(gè)文件的切片傳遞給后臺(tái),然后后臺(tái)再進(jìn)行合并,下面這篇文章主要給大家介紹了關(guān)于利用Vue3+Element-plus實(shí)現(xiàn)大文件分片上傳組件的相關(guān)資料,需要的朋友可以參考下
2023-01-01
詳解vue-cli4 配置不同開(kāi)發(fā)環(huán)境打包命令
這篇文章主要介紹了vue-cli4 配置不同開(kāi)發(fā)環(huán)境打包命令,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
Vue3中自定義事件總線的實(shí)現(xiàn)代碼
隨著 Vue 3 的發(fā)布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再適用或有所變化,為了應(yīng)對(duì)這種變化,我們可以選擇在 Vue 3 應(yīng)用中實(shí)現(xiàn)自定義的“事件總線”機(jī)制,所以本文給大家介紹了Vue3中如何自定義消息總線,需要的朋友可以參考下
2024-05-05
Vue中slot-scope的深入理解（適合初學(xué)者）
這篇文章主要給大家介紹了關(guān)于Vue中slot-scope的深入理解，這個(gè)教程非常適合初學(xué)者,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
在Vue中進(jìn)行數(shù)據(jù)分頁(yè)的實(shí)現(xiàn)方法
在前端開(kāi)發(fā)中,數(shù)據(jù)分頁(yè)是一個(gè)常見(jiàn)的需求,特別是當(dāng)處理大量數(shù)據(jù)時(shí),Vue作為一款流行的JavaScript框架,提供了強(qiáng)大的工具和生態(tài)系統(tǒng)來(lái)實(shí)現(xiàn)數(shù)據(jù)分頁(yè),本文將介紹如何在Vue中進(jìn)行數(shù)據(jù)分頁(yè),以及如何設(shè)計(jì)一個(gè)通用的分頁(yè)組件,需要的朋友可以參考下
2023-10-10
vuex中store存儲(chǔ)store.commit和store.dispatch的用法
這篇文章主要介紹了vuex中store存儲(chǔ)store.commit和store.dispatch的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
nginx配置域名后的二級(jí)目錄訪問(wèn)不同項(xiàng)目的配置操作
這篇文章主要介紹了nginx配置域名后的二級(jí)目錄訪問(wèn)不同項(xiàng)目的配置操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn)
Vue3中的app.config.globalProperties是一個(gè)強(qiáng)大的全局配置功能,允許我們?cè)趹?yīng)用級(jí)別設(shè)置和訪問(wèn)屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下
2024-01-01
vue使用Canvas在畫(huà)布上添加圖片方式
這篇文章主要介紹了vue使用Canvas在畫(huà)布上添加圖片方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue中添加音頻和視頻的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何vue中添加音頻和視頻的相關(guān)知識(shí),文中的示例代碼簡(jiǎn)潔易懂,具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以了解下
2023-08-08