vue点击空白处，隐藏div

 

1.写一个全局的点击事件 handleALL
<template>
　　<div @click = handleALL>
　　　　2.需要隐藏的div
　　　　<div id="box">
　　　　　　<p @click = handleShow>点击显示或隐藏 </p>
　　　　　　<div v-if="showType"
　　　　　　　　显示或隐藏的div
　　　　　　</div>
　　　　</div>
　　</div>
</template>

<script>
export default{
　　data(){
　　　　return{
　　　　　　showType:false // 一开始是隐藏的
　　　　}
　　},
　　methods:{
　　　　// 页面点击
　　　　handleALL(event){
　　　　3.重点----点击到了id为box以外的区域 就判断为false
　　　　　　var one = document.getElementById("box");
　　　　　　if(one){
　　　　　　　　if(!one.contains(event.target)){
　　　　　　　　this.showType = false
　　　　　　　　}
　　　　　　}
　　　　}，
　　　　handleShow(){
　　　　　　this.showType = true
　　　　}
　　}
}
</script>