1.因為el-input 沒有點擊input以外的事件
2.所以應該用自定義指令來實現(xiàn)瞳购，下拉是否顯示還是隱藏
3.判斷是否點擊的是input话侄，如果點擊input以外的地方都隱藏，點擊input顯示
簡單想應該怎么實現(xiàn)学赛？
1年堆、肯定是給document增加一個click事件監(jiān)聽
2、當發(fā)生click事件的時候判斷是否點擊的當前對象
結(jié)合著本思路和指令咱們來實現(xiàn)盏浇。
簡單介紹vue指令
一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選)：
bind：只調(diào)用一次嘀韧，指令第一次綁定到元素時調(diào)用。在這里可以進行一次性的初始化設(shè)置缠捌。
inserted：被綁定元素插入父節(jié)點時調(diào)用 (僅保證父節(jié)點存在，但不一定已被插入文檔中)译蒂。
update：所在組件的 VNode 更新時調(diào)用曼月，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變柔昼，也可能沒有哑芹。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數(shù)參數(shù)見下)。
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用捕透。
unbind：只調(diào)用一次聪姿，指令與元素解綁時調(diào)用。
直接上代碼
寫在export default上面
const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {
function documentHandler(e) {
// 這里判斷點擊的元素是否是本身乙嘀，是本身末购，則返回
if (el.contains(e.target)) {
return false;
}
// 判斷指令中是否綁定了函數(shù)
if (binding.expression) {
// 如果綁定了函數(shù) 則調(diào)用那個函數(shù)，此處binding.value就是handleClose方法
binding.value(e);
}
}
// 給當前元素綁定個私有變量虎谢，方便在unbind中可以解除事件監(jiān)聽
el.__vueClickOutside__ = documentHandler;
document.addEventListener('click', documentHandler);
},
update() {},
unbind(el, binding) {
// 解除事件監(jiān)聽
document.removeEventListener('click', el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};
data里面寫
show: true, //默認是顯示的
data下面寫 directives: { clickoutside },注冊
methods: {
handleClose(e) {
var myPanel = document.getElementById('myPanel')// 得到點擊出現(xiàn)的節(jié)點（input）
if (myPanel) {
this.show = true// 有改節(jié)點的時候盟榴，顯示，解決第二次點擊openAddress按鈕出現(xiàn)的bug
if (!(myPanel.contains(e.target))) { // 這句是說如果我們點擊到了id為myPanel以外的區(qū)域婴噩，為false
this.show = false// 消失
}
}
},
html結(jié)構(gòu)
<div class="search_box">
<!-- <img src="../assets/img/logo-mini.png" alt="" @click="gotoSearch" /> -->
<img src="../assets/img/logo-word@3x.png" alt="" @click="gotoSearch" />
<yto-input
id="myPanel"
type="text"
:class="{ 'activeInput': historyList.length>0}"
class="input-search"
placeholder="請輸入關(guān)鍵字"
v-model.trim="searchKey"
@change="searchList"
@focus="searchListFocus"
ref="searchInput"
:trigger-on-focus="true"
autocomplete="off"
autocapitalize="off"
autocorrect="off"
autofocus
></yto-input>
<el-button type="primary" class="search_btn" @click="search"
>搜索一下</el-button
>
</div>
<!--歷史記錄--> 這個是否顯示
<div class="historyBox show" v-show="show" v-clickoutside="handleClose">
<p>歷史記錄 <i class="el-icon-delete delete" @click="deleteFn"></i></p>
<div
v-for="item in historyList"
:key="item.id"
@click="itemHistory(item.vocabulary)"
v-if="historyList.length>0&&item.vocabulary"
>
{{item.vocabulary}}
</div>
</div>
點擊每一項歷史記錄的時候歷史記錄下拉框消失
//點擊歷史記錄每個點擊事件擎场，值付給input
itemHistory(vocabulary){
this.searchKey=vocabulary
this.show=false;
this.search() //搜索接口
},
