div添加blur事件

问题所在

遇到一个需求，要给一个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/