vue中实现点击自身元素之外其他元素时，关闭自身元素

原创于 2021-02-24 11:27:00 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

弹出框

1 篇文章

订阅专栏

本文介绍了如何在Vue应用中实现点击页面任意位置（除了特定元素自身）时关闭该特定元素。通过在不希望关闭的元素上添加@click.stop事件，阻止事件冒泡，然后在外层设置一个全屏遮罩层，点击遮罩层时调用close函数以关闭弹窗。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在点击不想关闭的元素的上加@click.stop事件，阻止事件冒泡

html

<div class="user" v-show="popup" @click="close()">
      <div class="user-more" @click.stop="closestop()">...</div>
</div>

给外层一个弹出框，宽高百分百，覆盖整个屏幕，点击外层遮罩层的时候，触发close函数，关闭弹窗

css

/* 外层遮罩层 */
.user{
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(2, 2, 2, 0);
  z-index: 9999;
}
/* 用户弹出框 */
.user-more{
  width: 55vw;
  height: 100vw;
  border-radius: 1vw;
  border: 1px solid #eee;
  background: #fff;
  position: absolute;
  top: .5vw;
  right: 1vw;
  z-index: 10000;
}

data(){
    return{
      popup:true,//用到的变量
    }
  },

methods:{
      //更改popup值
      //点击外层关闭显示框
      close(){
          this.popup=false;
      },
      //点击自身显示框仍显示
      closestop(){
         this.popup=true;
      },
     
},