實例：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() }
}