vue点击其他地方隐藏div

方法1

给最外层元素加上点击事件

 @click="showSelectDataSrc=false"

给点击出现的盒子的添加点击事件,记得加.stop,阻止冒泡

 @click.stop="showSelectDataSrc=true"

给自身盒子

 @click.stop="showSelectDataSrc=true"

如果是嵌套路由，给嵌套的最外层的添加点击事件

 @click="hideClickWrapper()"
hideClickWrapper() {
        if (document.querySelector('.click-wrapper')) {//先判断下，不然会报错
          this.$nextTick(() => {
            document.querySelector('.click-wrapper').style.display = 'none'
          })
        }
      },

方法2

如果不需要兼容ie，可以用，contains不兼容ie

mounted() {
    document.addEventListener('click',(e)=>{
     let refClick = this.$refs.clickWrapper.contains(e.target)//自身盒子
     let refIcon = this.$refs.iconWrapper.contains(e.target)//点击出现盒子的盒子
     if(!refClick && !refIcon){
       that.showSelectDataSrc = false;
     }
   })
  },

方法3

可以判断当前点击的是否是需要隐藏盒子的class

mounted() {
   document.addEventListener('click',function(e){
                if(e.target.className!='usermessage'){
                    that.showSelectDataSrc =false;
                }
})
  },