微客导航 » 文章资讯 » Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

2023-08-05 01:03:04 166

1.绑定元素

2.mounted生命周期

3.实现思路

4.最终效果

接着看下vue实现点击目标元素外页面的其他地方隐藏弹窗

方法：

步骤1：给页面最外出的元素div加点击事件：@click=“popShow=false”。

步骤2：给点击目标元素加点击事件：@click=“popShow=true”。

备注：popShow为控制弹窗显示与隐藏的标志。

PS：下面看下vue实现点击其他地方隐藏div

方法一：

通过监听事件

document.addEventListener('click',function(e){
if(e.target.className!='usermessage'){
that.userClick=false;
}
})

方法二（比较好）：

给最外层的div加个点击事件@click="userClick=false"

给点击的元素上面加上：@click.stop="userClick=!userClick"

方法三：