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

0 0 vue.js javascript
Php齐天小圣
Php齐天小圣

声望值:312 0人

2018-08-22 08:42:03 提问

关注 0关注

收藏 0收藏, 245浏览

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

请先 登录 后评论

3个回答

  • cookeyang.101声望 2018-08-08 11:41

    写了一个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>
    请先 登录 后评论
  • Carlos Beranger174声望 2018-08-08 11:42

    <!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>
    请先 登录 后评论
  • ㄨ木子李97声望 2018-08-08 11:42

    最好是采用一个透明的遮罩层进行点击事件从而达到隐藏为什么不采用监听body的监听事件呢,一方面是因为可能会发生点击事故,就是不小心点到其他a标签、跳转标签或者事件触发元素,会直接触发其他函数或者跳转页面;另一方面是因为可维护性不好,假设可以通过点击多个元素关闭,那么需要挨个判断id。所以正常解决办法一种是按照楼上的: <div class="box-container" @click.self="toggleBox"> <!-- self的作用是阻止冒泡,点击box区域时,box不会消失 --> <div class="box" v-show="showBox"> {{message}} </div> </div> 一种是单独写一个遮罩层组件,可以随时使用(原理差不多,代码就不写了):可以通过slot或者自定义属性来进行控制哪个元素的开闭。
    请先 登录 后评论

注册新账号

悬赏追问
10
  • 10
  • 20
  • 50
  • 100
  • 200
  • 输入数值
发布追问