vue-点击当前元素之外的区域关闭元素

点击按钮的时候，来回切换隐藏元素，当点击元素之外的区域时（除了点击按钮（元素））隐藏掉元素

一、为显示元素的按钮（元素）绑定点击事件

<span @click.stop="citySelected">[切换]</span>

注：需要为点击元素添加阻止冒泡事件（.stop），要不然会被覆盖掉

二、 设置显示或隐藏的元素

 <div class="city-box" v-show="cityShow"></div>

1、绑定data

data(){
  return{
    cityShow: false
  }
}

三、在vue实例初始化完成时，为页面添加点击事件

mounted(){
  document.addEventListener('click', () => {
      if (this.cityShow === true) {
        this.cityShow = false
      }
    })
}

注：点击屏幕的时候，判断元素有没有显示，显示的话则隐藏它

1、为点击元素绑定事件

selectCity(e) {
  this.cityShow = !this.cityShow
}