由於elementUI的下拉菜單在項目中表現得不盡人意 (定位的原因)
於是 決定自己 整一個 小而美
理清下面幾種情況就妥了
出現前 出現后 點擊后 出現后未點擊選項(點擊空白頁)
還是直接放碼過來 show you my code吧~~~
直接上點擊空白(其他)頁面 選項框收回 代碼吧
思路:直接阻止按鈕和選項框的事件冒泡,然后給document綁定事件讓選項框消失
頁面渲染完即添加點擊事件 vue實例銷毀 移除點擊事件
頁面其他點擊事件一定要記得加上.stop 阻止冒泡 親測不加 點擊不會生效 沒有反應
方法二:通過target事件 判定 只要點擊的不是包裹住按鈕和內容區域的Div就讓v-show為false
剛進來時
點擊一下“點擊”
再次點擊“點擊”
點擊頁面外
內容顯示時 點擊頁面外
點擊頁內顯示
點擊頁外消失
o了~~~
vue中可設定元素ref 然后this.$refs訪問該元素得信息
忘了個事情
這個彈出層整體的場景是這樣的
點擊某個按鈕 一片內容出現 彈出是一個動畫效果 可自定義
再次點擊這個按鈕 內容又消失 這是天才紙尿褲的第一步
如下
點擊span時會切換初始值false 在true false 之間切換
用此來控制內容區域的顯示
【優化】
頁面中有多個彈出組件時 只需要單個的彈出 點擊其他組件 當前同樣消失
結合以上
只要點擊的不是當前這個特定的按鈕,即消失 同樣通過e.target判斷