问题所在
遇到一个需求，要给一个div添加blur事件，具体情况是：el-seclect不满足项目下拉列表的需求，找了一些插件，也没发现比较好用的，所以就决定自己用div实现效果，也就遇到了当鼠标点击其他空白处时，div要隐藏起来的问题
尝试过程
刚开始毫无思路，查了查资料，发现还真的可以
1. 直接给div加blur事件
<div class="box" id="box" @blur="onblur"></div>
不生效，然后发现是div不能直接加blur事件
2.用tabindex
差不多就是这种：https://blog.csdn.net/u013112461/article/details/90747257，效果很奇怪，不符合需求
解决方法
最后想到了，用vue去监听所有的点击事件，从里面筛选出来这个div，除了点击这个div，其他地方全部隐藏
错误写法：
<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;
}
}
})
这个想法没问题，但是运行之后，控制台报错
Uncaught TypeError: this.$refs.boxRef.contains is not a function at HTMLDocument.eval，就很烦，然后查了好久，终于找到一篇相关博客，原因就是用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;
}
}
})
到这里就成功的实现了div的blur效果，学废了学废了！
贴上大佬博客：https://www.freesion.com/article/33241074504/
