点击页面其他位置，弹窗消失

功能：

1、点击消息，显示消息弹窗

2、再次点击消息，弹窗消失

3、点击页面弹窗外其他地方，弹窗消失

实现：

消息弹窗封装为一个组件

<div @mouseenter="mouseenter()" @mouseleave="mouseleave()">
  <div v-show="open">
    ......
  </div>
</div>

data(){
  return{
    // 弹窗状态
    open: false,
    // 鼠标是否在弹窗上
    isExist: false,
  }
}

mounted(){
  // this对象在系统中随时会改变，var that = this之后，that不会改变，仍然指向之前的this，这样就不会
  // 找不到原来的对象
  var that = this
  // 获取到的为当前VueComponent对象
  console.log(this)
  
  window.addEventListener('click',function(){
    // window对象
    console.log(this)
    // 当前VueComponent对象
    console.log(that)
    
    if(that.isExist === true){
      // 如果鼠标停靠在弹窗上点击，弹窗不消失
      that.open = true
    }else{
      that.messageAlertNo()
    }
  })
}

mouseenter() {
  this.isExist = true
},
mouseleave() {
  this.isExist = false
},
messageAlert() {
  this.isExist = !this.isExist
  this.open = !this.open
},
messageAlertNo() {
  if (this.open === true) {
    this.open = false
    this.isExist = false
  }
},