实例：vue中点击空白区域关闭某个div图层

<template>
  <div class="search" ref="searchMain">
    <el-input v-model="value" placeholder="请输入搜索内容" ref="input"
      @focus="getFocus"
      @input="changeVal"
      @clear='clearCard'
      @blur="onBlurFocus"
      clearable style="width:300px">
    </el-input>
    <el-button type="primary" icon="el-icon-search" @click="onSearch"></el-button>

    <!-- 点击空白区域关闭某个div图层 -->
    <el-card>
      <el-button @click="togglePanel">点击</el-button>
      <div v-show="visible" ref="main">弹出层</div>
    </el-card>
  </div>
</template>

data() {
　　return {
　　　　visible: false
　　}
}
methods:{
// 点击空白区域关闭某个div图层
togglePanel () {
this.visible ? this.hide() : this.show()
},
show () {
this.visible = true
document.addEventListener('click', this.hidePanel, false)
},

hide () {
this.visible = false
document.removeEventListener('click', this.hidePanel, false)
},

hidePanel (e) {
if (!this.$refs.searchMain.contains(e.target)) {
this.hide()
}
}