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

Question

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

Answer 1

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