vue如何实现点击空白区域关闭弹窗

<template>
  <div ref="list">
      <span @click="is_list_show=!is_list_show">点击</span>
      <ul class="head-list-select" v-if="is_list_show">
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
      </ul>
  </div>
</template>

mounted(){
	document.addEventListener("click", this.bodyCloseMenus)
},
beforeDestroy() { // 在页面注销前，删除点击事件
	document.removeEventListener("click", this.bodyCloseMenus);
},
methods: {
	bodyCloseMenus(e){
		let btnstatus = this.$refs['list'];
		if(btnstatus &&!btnstatus.contains(e.target)){
			this.is_list_show = false;
		}
	}
},

<template>
  <div ref="list" @click.stop>
      <span @click="is_list_show=!is_list_show">点击</span>
      <ul class="head-list-select" v-if="is_list_show">
        <li>菜单1</li>
        <li>菜单2</li>
        <li>菜单3</li>
        <li>菜单4</li>
        <li>菜单5</li>
      </ul>
  </div>
</template>

mounted(){
	document.addEventListener("click", this.bodyCloseMenus)
},
beforeDestroy() {
	document.removeEventListener("click", this.bodyCloseMenus);
},
methods: {
	bodyCloseMenus(e){
		let self = this;
     	if (self.is_list_show == true){
     	     self.is_list_show = false;
     	}
	}
},