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