vue 点击弹窗外隐藏弹窗

mounted() {
    this.$nextTick(function() {
      document.addEventListener("click", e => {
        this.closeBox(e);
      });
    });
  },
  // 销毁document的点击事件
  beforeDestroy() {
    document.removeEventListener('click', e => {
      this.closeBox(e);
    });
  }

methods:{
	closeBox(e){
		const addDemandBox = this.$refs.addDemandBox;
		if (addDemandBox && !addDemandBox.contains(e.target)) {
	        this.addDemandDialog = false;
	      }
	}
}

contains 检测一个元素包含在另一个元素之内

原理：

监听click事件，当点击时判断点击位置是否包含在目标元素内，若判断通过则隐藏

// 创建click监听
  mounted () {
    document.addEventListener('click', this.queryHide)
  },
// 清除click监听
  beforeDestroy () {
    document.removeEventListener('click',this.queryHide)
  },
  methods: {
    queryHide (e) {
      if ((!this.$refs.queryBox.contains(e.target)) && (!this.$refs.queryDown.contains(e.target))) {
    /* 关闭元素 */
        this.show = false
      }
    }
  }

注意：

1.监听需要清除，否则控制台会报错，虽然不影响使用

2.一般判断需要判断需要关闭的元素和开启这个元素的按钮

3.ref替代了jquery和js的dom选择，当不适用vue的时候可以直接使用dom选择器完成以上操作

菜鸟教程
http://www.runoob.com/jquery/misc-contains.html