有个需求,点击一个元素,让弹出框显示,点击弹出框以外的区域,就关闭弹出框,如下代码所示。
但是这样有个问题,就是当弹出框显示以后,点击弹出框的区域也会触发父元素的点击事件,使得ifshow=false
html
<view @click="ifshow=false">
<view @click="ifshow=true">
点击显示弹出框
</view>
<view v-if="ifshow">
弹出框
</view>
</view>
解决方法: 在子组件事件加个修饰stop
,就会相互隔绝父子事件
html
<view @click="ifshow=false">
<view @click.stop="ifshow=true">
点击显示弹出框
</view>
<view v-if="ifshow">
弹出框
</view>
</view>