【Vue 组件开发】之 点击组件以外的区域 关闭弹出

如这种下拉选着组件，想要点击组件以外的部分关掉弹出

1 templete中写入ref用于选择dom组件

<div class="single-select" ref="singleSelect">

2 在dom上绑定点击事件

// 点击组件以外的区域 关闭弹出
    this.$nextTick(()=>{
      document.addEventListener('click',(e)=>{
          var sp = this.$refs.singleSelect;
	      if (sp && !sp.contains(event.target)) {      
	        this.visible = false;
	      }
      })
    })

其中 this.visible 控制展示与隐藏