在Vue里，点按钮显示/隐藏div，点按钮以外区域隐藏div

Template

<div @click="hideDiv">
  <el-button ref="btn" @click.stop="showDiv = !showDiv">显示隐藏div</el-button>
  <div v-if="showDiv" ref="div">我是div</div>
</div>

Script

data () {
  return {
    showDiv: false
  }
},
methods: {
    hideDiv () {
      const div = this.$refs.div  // 得到btn
      if (div) {
        this.showDiv = true
        if (!(div.contains(event.target))) {  // 点击div以外区域，隐藏div
          this.showDiv = false
        }
      }
    }
  }