vue2.0 點(diǎn)擊空白區(qū)域使盒子顯示隱藏

我先點(diǎn)擊瀏覽器的空白區(qū)域使這個(gè)盒子隱藏有沒有demo 可以寫一下謝謝了

回答

編輯回答

賤人曾

<!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>

2017年6月29日 17:48

編輯回答

伴謊

寫了一個(gè)demo，運(yùn)行一下試試

<!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的作用是阻止冒泡，點(diǎn)擊box區(qū)域時(shí)，box不會(huì)消失 -->
        <div class="box" v-show="showBox">
          {{message}}
        </div>
      </div>
      
    </div>
  </body>

  <script>
  var app = new Vue({
    el: '#app',
    data: {
      message: '這是一個(gè)盒子',
      showBox: true
    },
    methods: {
      toggleBox: function() {
        this.showBox = !this.showBox;  //通過控制showBox來控制box的顯示與隱藏
      }
    }
    })
  </script>
</html>

2017年3月14日 21:00

編輯回答

孤慣

最好是采用一個(gè)透明的遮罩層進(jìn)行點(diǎn)擊事件從而達(dá)到隱藏
為什么不采用監(jiān)聽body的監(jiān)聽事件呢，一方面是因?yàn)榭赡軙?huì)發(fā)生點(diǎn)擊事故，就是不小心點(diǎn)到其他a標(biāo)簽、跳轉(zhuǎn)標(biāo)簽或者事件觸發(fā)元素，會(huì)直接觸發(fā)其他函數(shù)或者跳轉(zhuǎn)頁(yè)面；另一方面是因?yàn)榭删S護(hù)性不好，假設(shè)可以通過點(diǎn)擊多個(gè)元素關(guān)閉，那么需要挨個(gè)判斷id。
所以正常解決辦法一種是按照樓上的：

 <div class="box-container" @click.self="toggleBox"> <!-- self的作用是阻止冒泡，點(diǎn)擊box區(qū)域時(shí)，box不會(huì)消失 -->
        <div class="box" v-show="showBox">
          {{message}}
        </div>
      </div>

一種是單獨(dú)寫一個(gè)遮罩層組件，可以隨時(shí)使用（原理差不多，代碼就不寫了）：可以通過slot或者自定義屬性來進(jìn)行控制哪個(gè)元素的開閉。

2017年5月12日 01:40