vue怎么给div绑定blur事件

用vue做下拉框组件，想在点击下拉框的那个div之外隐藏下拉框。

我想在此div中绑定blur事件实现，但是没有用。

网上看到div本身没有blur事件，需要添加属性tabIndex后方可用blur，试了但是依然没有用。请问各位前辈有好的方法吗？

<template>

<div class="dropdown" :tabIndex='1' @blur="alert(1)">

<input class="input-drop" @click="showDropDown" :value="selectedName"

@keydown.down="changeDown"`请输入代码` @keydown.up.prevent="changeUp" placeholder="请选择：" />

<ul class="ul-dropdown" v-show="isShow" >

<li class="li-dropdown" v-for="(item,index) in optObj.dropItems"

@click="chooseItem(index)" :class="{active:nowIndex===index,'nowItemBg':nowIndex===index}" :name="item">{{item}}</li>

</ul>

<div class="nodata" v-show="optObj.dropItems.length==0">暂无数据...</div>

</div>

遇到一个需求，要给一个 div 添加 blur 事件，具体情况是： el-seclect 不满足项目下拉列表的需求，找了一些插件，也没发现比较好用的，所以就决定自己用 div 实现效果，也就遇到了当鼠标点击其他空白处时， div 要隐藏起来的问题

刚开始毫无思路，查了查资料，发现还真的可以

1. 直接给 div 加 blur 事件

不生效，然后发现是 div 不能直接加 blur 事件

2.用 tabindex

差不多就是这种： https://blog.csdn.net/u013112461/article/details/90747257 ，效果很奇怪，不符合需求

最后想到了，用 vue 去监听所有的点击事件，从里面筛选出来这个 div ，除了点击这个 div ，其他地方全部隐藏

错误写法：

这个想法没问题，但是运行之后，控制台报错

Uncaught TypeError: this.$refs.boxRef.contains is not a function at HTMLDocument.eval ，就很烦，然后查了好久，终于找到一篇相关博客，原因就是 用js原生获取dom的方法代替ref方式

修改之后：

到这里就成功的实现了 div 的 blur 效果，学废了学废了！

贴上大佬博客： https://www.freesion.com/article/33241074504/

---