有這么一個需求，自己在vue中寫一個彈框，點擊某個按鈕讓彈框出現，點擊彈框之外令彈框消失。那這個點擊彈框之外的地方令彈框消失的功能大神們有什么方案嗎，感謝
uj5u.com熱心網友回復：
監聽document點擊事件只要不是彈窗dom就隱藏彈窗uj5u.com熱心網友回復：
body onclick=function(){ 消失代碼} 彈框 @click.stop=""uj5u.com熱心網友回復：
用vue的ref屬性注冊參考遮罩層，感覺是最直接的一個方法了uj5u.com熱心網友回復：
彈框外一般都要有一個遮罩層，給遮罩層添加一個點擊事件uj5u.com熱心網友回復：
在遮罩層添加一個click事件，呼叫關閉方法就可以了。如果你用element框架的彈框組件，它有一個closeOnClickModal引數，把它設定為false就可以了。uj5u.com熱心網友回復：
使用ui，比方說elementUI或者，外邊綁一個點擊事件，里面綁個阻止冒泡的點擊事件，點外面，改flag，display變成none，點里面，就不冒泡，不觸發這玩意，外面綁在window上或者別的什么，大大的東西上
uj5u.com熱心網友回復：
用自定義指令！
Vue.directive('clickout',{
bind:function(el,binding,vnode){
function documentHandler(e){
if(el.contains(e.target)){
return false
}
if(binding.expression){
binding.value(e)
}
}
el.__vueClickOut__=documentHandler
document.addEventListener('click',documentHandler)
},
unbind:function(el,binding){
document.removeEventListener('click',el.__vueClickOut__)
delete el.__vueClickOut__
}
})
在需要使用的標簽里加上
v-clickout="這里寫method里的操作顯示與否的函式名"
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/15357.html
標籤：JavaScript
上一篇：前端頁面劫持的原理是什么?
下一篇：網頁怎么列印設定紙型與橫豎版？