<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()

}
}