最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

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

我們提供的服務(wù)有：成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、橋東ssl等。為成百上千企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢(xún)和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的橋東網(wǎng)站制作公司

mousedown事件：mousedown的執(zhí)行順序大于blur事件

HTML代碼

通過(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ò)程

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

參考：https://www.jb51.net/article/171151.htm

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。