問(wèn)題所在
遇到一個(gè)需求，要給一個(gè)div添加blur事件，具體情況是：el-seclect不滿足項(xiàng)目下拉列表的需求，找了一些插件苦蒿，也沒(méi)發(fā)現(xiàn)比較好用的，所以就決定自己用div實(shí)現(xiàn)效果麦撵，也就遇到了當(dāng)鼠標(biāo)點(diǎn)擊其他空白處時(shí)刽肠，div要隱藏起來(lái)的問(wèn)題
嘗試過(guò)程
剛開(kāi)始毫無(wú)思路，查了查資料免胃，發(fā)現(xiàn)還真的可以
1. 直接給div加blur事件
<div class="box" id="box" @blur="onblur"></div>
不生效音五，然后發(fā)現(xiàn)是div不能直接加blur事件
2.用tabindex
差不多就是這種：https://blog.csdn.net/u013112461/article/details/90747257，效果很奇怪羔沙，不符合需求
解決方法
最后想到了躺涝，用vue去監(jiān)聽(tīng)所有的點(diǎn)擊事件，從里面篩選出來(lái)這個(gè)div扼雏，除了點(diǎn)擊這個(gè)div坚嗜，其他地方全部隱藏
錯(cuò)誤寫法：
<el-form-item label="樣例" prop="test">
<div class="box" v-show="typePanelFlag" ref="boxRef"></div>
</el-form-item>
document.addEventListener('click', (e) => {
let typePanel = this.$refs.boxRef.contains(e.target);
if(typePanel){
if (!typePanel.contains(e.target)){
this.typePanelFlag = false;
}
}
})
這個(gè)想法沒(méi)問(wèn)題，但是運(yùn)行之后诗充，控制臺(tái)報(bào)錯(cuò)
Uncaught TypeError: this.$refs.boxRef.contains is not a function at HTMLDocument.eval苍蔬，就很煩，然后查了好久蝴蜓，終于找到一篇相關(guān)博客碟绑，原因就是用js原生獲取dom的方法代替ref方式
修改之后：
<el-form-item label="樣例" prop="test" id = "formItem">
<div class="box" v-show="typePanelFlag" ref="boxRef"></div>
</el-form-item>
document.addEventListener('click', (e) => {
let typePanel = document.getElementById("formItem");
if(typePanel){
if (!typePanel.contains(e.target)){
this.typePanelFlag = false;
}
}
})
到這里就成功的實(shí)現(xiàn)了div的blur效果俺猿，學(xué)廢了學(xué)廢了！
貼上大佬博客：https://www.freesion.com/article/33241074504/
