vue 點擊彈出下拉菜單 點擊其他頁面收回菜單


由於elementUI的下拉菜單在項目中表現得不盡人意 (定位的原因)

於是 決定自己 整一個 小而美

理清下面幾種情況就妥了

出現前 出現后 點擊后 出現后未點擊選項(點擊空白頁)

還是直接放碼過來 show you my code吧~~~

直接上點擊空白(其他)頁面 選項框收回 代碼吧

思路:直接阻止按鈕和選項框的事件冒泡,然后給document綁定事件讓選項框消失

頁面渲染完即添加點擊事件 vue實例銷毀 移除點擊事件

 

頁面其他點擊事件一定要記得加上.stop 阻止冒泡 親測不加 點擊不會生效 沒有反應

 方法二:通過target事件 判定 只要點擊的不是包裹住按鈕和內容區域的Div就讓v-show為false

 

剛進來時

點擊一下“點擊”

再次點擊“點擊”

點擊頁面外

 

 

 內容顯示時 點擊頁面外

點擊頁內顯示

點擊頁外消失

 o了~~~

 

vue中可設定元素ref 然后this.$refs訪問該元素得信息 

 

 

忘了個事情

這個彈出層整體的場景是這樣的 

點擊某個按鈕 一片內容出現 彈出是一個動畫效果 可自定義

再次點擊這個按鈕 內容又消失 這是天才紙尿褲的第一步

如下 

 

點擊span時會切換初始值false 在true false 之間切換

用此來控制內容區域的顯示

 【優化】

頁面中有多個彈出組件時 只需要單個的彈出 點擊其他組件 當前同樣消失

結合以上

只要點擊的不是當前這個特定的按鈕,即消失 同樣通過e.target判斷

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM