javascript - Vue項(xiàng)目中如何使預(yù)查詢的顯示框隱藏
問(wèn)題描述
Vue項(xiàng)目中,某個(gè)組件中的預(yù)查詢的List列表如何點(diǎn)擊除它自己外任意地方使該列表隱藏?
代碼如下:1.數(shù)據(jù)綁定處:
2.事件綁定:
3.有的同學(xué)會(huì)說(shuō),將輸入框設(shè)置失去焦點(diǎn)事件,,但是如圖的列表顯示,,想要點(diǎn)擊選中列表的值,會(huì)是的input先失去焦點(diǎn),,會(huì)照成無(wú)法選中列表值的情況發(fā)生,,,4.各位路過(guò)的同學(xué),瞅一眼啦
問(wèn)題解答
回答1:我的項(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來(lái)判斷
回答2:document.addEventListener(’click’, function(e){ //通過(guò)判斷e.target 來(lái)判斷點(diǎn)擊的元素 當(dāng)不屬于下拉框和輸入框的時(shí)候 隱藏下拉框})回答3:
考慮了之后我覺(jué)得 失焦 還是一個(gè)比較理想的事件。至于你說(shuō)的想要點(diǎn)擊選中列表的值,會(huì)是的input先失去焦點(diǎn),,會(huì)照成無(wú)法選中列表值的情況發(fā)生,,,在綁定的 focusout事件上添加代碼如下
eventHandler (event) { event.preventDefault() // 這里設(shè)置input 綁定的data this.bisible = false}
這樣應(yīng)該可以解決問(wèn)題。
回答4:嗯,那個(gè)人說(shuō)的跟我的一樣
相關(guān)文章:
1. 數(shù)據(jù)庫(kù) - Mysql的存儲(chǔ)過(guò)程真的是個(gè)坑!求助下面的存儲(chǔ)過(guò)程哪里錯(cuò)啦,實(shí)在是找不到哪里的問(wèn)題了。2. ios - 類似微博首頁(yè),一張圖的時(shí)候是如何確定圖大小的?3. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)4. javascript - 我是做web前端的,公司最近有一個(gè)項(xiàng)目關(guān)于數(shù)據(jù)統(tǒng)計(jì)的!5. 實(shí)現(xiàn)bing搜索工具urlAPI提交6. Python中使用超長(zhǎng)的List導(dǎo)致內(nèi)存占用過(guò)大7. javascript - vuejs+elementui 購(gòu)物車價(jià)格計(jì)算,點(diǎn)擊加減號(hào)修改數(shù)量總價(jià)都不會(huì)改變,但是計(jì)算執(zhí)行了8. python - Django有哪些成功項(xiàng)目?9. 鏈接圖片時(shí),鏈接不成功10. node.js - 微信小程序websocket連接問(wèn)題
