欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2019年09月29日 11:35:57   作者:czrgit  
這篇文章主要介紹了在vue中根據(jù)光標(biāo)的顯示與消失實現(xiàn)下拉列表,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

重點知識

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ì)過程

  1. 點擊input標(biāo)簽觸發(fā)showList(true)方法,有它是true直接執(zhí)行 this.state = state//顯示下拉列表
  2. 點擊下拉框內(nèi)容觸發(fā)handleSearch(data)方法 把 this.isShowList = true 標(biāo)注這是在下拉框內(nèi)容的點擊事件,將不會隱藏下拉框
  3. 最后通過blur觸發(fā)showList(false),他將根據(jù)this.isShowList判斷是否隱藏下拉框,當(dāng)this.isShowList是true時,執(zhí)行this.isShowList = false 把this.isShowList回復(fù)原樣,讓點擊空白區(qū)也能隱藏下拉框,
  4. 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)大文件分片上傳組件

    利用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)境打包命令

    這篇文章主要介紹了vue-cli4 配置不同開發(fā)環(huán)境打包命令,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-07-07
  • Vue3中自定義事件總線的實現(xiàn)代碼

    Vue3中自定義事件總線的實現(xiàn)代碼

    隨著 Vue 3 的發(fā)布,一些在 Vue 2 中常用的通信方式在 Vue 3 中可能不再適用或有所變化,為了應(yīng)對這種變化,我們可以選擇在 Vue 3 應(yīng)用中實現(xiàn)自定義的“事件總線”機(jī)制,所以本文給大家介紹了Vue3中如何自定義消息總線,需要的朋友可以參考下
    2024-05-05
  • Vue中slot-scope的深入理解(適合初學(xué)者)

    Vue中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)方法

    在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-10
  • vuex中store存儲store.commit和store.dispatch的用法

    vuex中store存儲store.commit和store.dispatch的用法

    這篇文章主要介紹了vuex中store存儲store.commit和store.dispatch的用法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-07-07
  • nginx配置域名后的二級目錄訪問不同項目的配置操作

    nginx配置域名后的二級目錄訪問不同項目的配置操作

    這篇文章主要介紹了nginx配置域名后的二級目錄訪問不同項目的配置操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue3全局屬性app.config.globalProperties的實現(xiàn)

    Vue3全局屬性app.config.globalProperties的實現(xiàn)

    Vue3中的app.config.globalProperties是一個強(qiáng)大的全局配置功能,允許我們在應(yīng)用級別設(shè)置和訪問屬性,本文主要介紹了Vue3全局屬性app.config.globalProperties的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下
    2024-01-01
  • vue使用Canvas在畫布上添加圖片方式

    vue使用Canvas在畫布上添加圖片方式

    這篇文章主要介紹了vue使用Canvas在畫布上添加圖片方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • vue中添加音頻和視頻的示例詳解

    vue中添加音頻和視頻的示例詳解

    這篇文章主要為大家詳細(xì)介紹了如何vue中添加音頻和視頻的相關(guān)知識,文中的示例代碼簡潔易懂,具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以了解下
    2023-08-08

最新評論