<!-- 示例组件 -->
<template>
<div class="index" @click.stop>
<button @click="isShow = !isShow ">{{ isShow ? '关闭':'打开' }}弹窗</button>
<div class="content" v-show="isShow"></div>
</div>
</template>
<script>
export default {
data() {
return {
isShow:false
}
},
mounted(){
document.body.addEventListener('click',()=>{
this.isShow = false;
},false);
}
}
click.stop取消冒泡事件点击范围内不生效
给body添加点击事件使组件隐藏