思路很简单,把页面中的其他点击事件阻止一下冒泡,然后点击body的时候正常做你想做的操作就行,超简单
js:
data: function(){
return {
show:false
}
},
mounted () {
document.addEventListener('click', this.handleBodyClick)
},
destroyed () {
document.removeEventListener('click', this.handleBodyClick)
},
methods:{
handleBodyClick: function(){
if (this.show) {
this.show = false;
}
}
toggleShow: function(){
this.show = !this.show
}
}
html:
<div :class="{'show':show}" @click.stop="toggleShow()">
、、、
</div>
本文介绍了一种在前端开发中防止元素内部点击事件冒泡到外部的方法,通过使用Vue.js的@click.stop指令,并结合JavaScript来实现点击遮罩层时隐藏显示内容的功能。
3655





