問題描述

Vue項(xiàng)目中，某個(gè)組件中的預(yù)查詢的List列表如何點(diǎn)擊除它自己外任意地方使該列表隱藏？

代碼如下：1.數(shù)據(jù)綁定處：2.事件綁定：

3.有的同學(xué)會(huì)說，將輸入框設(shè)置失去焦點(diǎn)事件，，但是如圖的列表顯示，，想要點(diǎn)擊選中列表的值，會(huì)是的input先失去焦點(diǎn)，，會(huì)照成無法選中列表值的情況發(fā)生，，，4.各位路過的同學(xué)，瞅一眼啦

問題解答

我的項(xiàng)目

mounted () { /*** * 使得其點(diǎn)擊之外的部分自動(dòng)收起 */ document.addEventListener(’click’, (e) => {if (!this.$el.contains(e.target)) { this.reset()} }) }

意思就是點(diǎn)擊不在這個(gè)組件內(nèi)的區(qū)域收起彈出框，當(dāng)然你可以把this.$el改成一個(gè)ref來判斷

document.addEventListener(’click’, function(e){ //通過判斷e.target 來判斷點(diǎn)擊的元素 當(dāng)不屬于下拉框和輸入框的時(shí)候 隱藏下拉框})回答3：

考慮了之后我覺得 失焦 還是一個(gè)比較理想的事件。至于你說的想要點(diǎn)擊選中列表的值，會(huì)是的input先失去焦點(diǎn)，，會(huì)照成無法選中列表值的情況發(fā)生，，，在綁定的 focusout事件上添加代碼如下

eventHandler (event) { event.preventDefault() // 這里設(shè)置input 綁定的data this.bisible = false}

這樣應(yīng)該可以解決問題。

嗯，那個(gè)人說的跟我的一樣