vue2.0 点击空白区域使盒子显示隐藏

飞机遇难了

49916

发布于
2017-12-12

我先点击浏览器的空白区域使这个盒子隐藏有没有demo 可以写一下谢谢了

vue.js javascript

阅读 7.1k

4 个回答

得票最新

LishiJ

295916

发布于
2017-12-13

✓ 已被采纳

最好是采用一个透明的遮罩层进行点击事件从而达到隐藏
为什么不采用监听body的监听事件呢，一方面是因为可能会发生点击事故，就是不小心点到其他a标签、跳转标签或者事件触发元素，会直接触发其他函数或者跳转页面；另一方面是因为可维护性不好，假设可以通过点击多个元素关闭，那么需要挨个判断id。
所以正常解决办法一种是按照楼上的：

 <div class="box-container" @click.self="toggleBox"> <!-- self的作用是阻止冒泡，点击box区域时，box不会消失 -->
        <div class="box" v-show="showBox">
          {{message}}
        </div>
      </div>

一种是单独写一个遮罩层组件，可以随时使用（原理差不多，代码就不写了）：可以通过slot或者自定义属性来进行控制哪个元素的开闭。

max210

2791511

发布于
2017-12-12

写了一个demo，运行一下试试

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
  </head>
  <style media="screen">
  .box-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .box{
    width: 200px;
    height: 200px;
    background-color: #999;
  }
  </style>
  <body>
    <div id="app">

      <div class="box-container" @click.self="toggleBox"> <!-- self的作用是阻止冒泡，点击box区域时，box不会消失 -->
        <div class="box" v-show="showBox">
          {{message}}
        </div>
      </div>
      
    </div>
  </body>

  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '这是一个盒子',
      showBox: true
    },
    methods: {
      toggleBox: function() {
        this.showBox = !this.showBox;  //通过控制showBox来控制box的显示与隐藏
      }
    }
    })
  </script>
</html>

summer

发布于
2017-12-13

新手上路，请多包涵

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
<style>
    body{
        width:1000px;
        height:1000px;
    }
    #app{
        width:200px;
        height:200px;
        background:red;
    }
</style>

</head>
<body>
<div v-show="isShow" id="app">
</div>
<script>

var app=new Vue({
    el: "#app",
    data: {
        isShow:true
    }
});
document.body.onclick=function(e){
    if(e.target.id!="app"){
        app.isShow=!app.isShow;
    }
}

</script>
</body>
</html>