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

Question

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

Answer 1

最好是采用一个透明的遮罩层进行点击事件从而达到隐藏

为什么不采用监听body的监听事件呢，一方面是因为可能会发生点击事故，就是不小心点到其他a标签、跳转标签或者事件触发元素，会直接触发其他函数或者跳转页面；另一方面是因为可维护性不好，假设可以通过点击多个元素关闭，那么需要挨个判断id。

所以正常解决办法一种是按照楼上的：

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

        <div class="box" v-show="showBox">

          {{message}}

        </div>

      </div>

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