vue点击空白处隐藏
提供两种常用方法1、方法比较简单,原理是需要隐藏的点击document使其show的值为false,点击需要出现的加上阻止冒泡即可。@click.stop="isShow" (推荐使用)mounted(){var that=this;//this的指向问题document.addEventListener('click',function(e){...
·
提供两种常用方法
1、方法比较简单,原理是需要隐藏的点击document使其show的值为false,
点击需要出现的加上阻止冒泡即可。@click.stop="isShow" (推荐使用)
mounted(){
var that=this;//this的指向问题
document.addEventListener('click',function(e){
that.show=false; //这里that代表组件,this代表document
})
},
methods{
isShow:function(){
this.show=true
}
}
2、将点击的区域过滤。不需要再阻止冒泡,需要使用到ref属性
<template>
<div ref="box">
<div @click="isShow"></div>
</div>
</template>
mounted(){
let that=this;
document.addEventListener('click',function(e){
if(!that.$refs.box.contains(e.target)){
that.show = false;
}
})
},
methods:{
isShow:function(){
this.show=true
}
}
更多推荐
已为社区贡献5条内容
所有评论(0)