vue怎么给div绑定blur事件

Question

用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>
</template>

Answer 1

时隔一年我也遇到了这个问题，找了1天没找到答案
需求是注册的时候做个手机号验证 当输入完手机号后去验证该手机号有没有注册过，但是就是获取不到blur事件。 后来发现<mt-field>可以使用@change="show"可以实现此功能
<mt-field placeholder="请输入手机号" type="tel" v-model="phoneNumber" @change="show"></mt-field>

Answer 2

这个你应该给body加一个全局点击事件，点击body的时候就通知你这个组件，body被点击了。
然后你隐藏你的下拉框就好了

Answer 3

用这两个不就行了
mouseenter
mouseleave

Answer 4

我也遇到了一样的问题，说一下解决思路：

1. 要把这个元素设置成 focusable 的元素，通过设置 tabindex 这一属性来实现
2. 我最初用的事件监听是 @focus.native，并不可行，后来试了 @focus.native.capture 也不可行，倒是 @blur 和 @focusout 可行
   blur 和 foucsout 的区别就是 blur 不支持冒泡，而 Vue 的事件默认触发阶段是在冒泡阶段

另外，题主把 tabindex 错写成 tabIndex 了。

Answer 5

拿a标签来模拟啊，天然支持blur事件，设定href="javascript:void(0)"就行了。

Answer 6

你貌似tabindex笔误了，中间的i是小写，不是I

Answer 7

请问你这个问题解决了吗

Answer 8

vue应该没有blur方法，我去官方文档查了，找不到blur，blur用change代替一下可以的

Answer 9

虽然是2020了，还是写一下，就当给自己做笔记了，楼上所说的通过添加全局点击事件实现点击空白处隐藏候选框的具体代码：

created() {
  // 实现点击空白处隐藏候选框
 window.addEventListener('click', this.clickOther)
},
destroyed() {
  window.removeEventListener('click', this.clickOther)
},

clickOther(e) {
  const self = this
 if (self.$el.querySelector('.search-content') && !self.$el.querySelector('.search-content').contains(e.target)) {
      self.isCandidateBox = false
 console.log('点击事件1')
    }
},

Answer 10

你好，请问这个问题解决了吗？急需。。。