# 【Vue】修复 element 可搜索下拉框选中选项，切屏后，会自动获取焦点，菜单自动弹出

# 1. 添加自定义指令 v-select-blur

# 在 main.js 添加：

Vue.directive('select-blur', {
  bind(el, binding) {
    let inputDom = el.getElementsByTagName('input')[0]
    if (!inputDom) return 
    let isOpen = false
    inputDom.addEventListener('focus', function (event) {
      if (isOpen) {
        inputDom.blur()
      } else {
        isOpen = true
      }
    })
  }
})

# 用法：

<el-select
    v-select-blur
    v-model="value"
    :placeholder="请选择"
    clearable
    filterable
>
 <el-option
     v-for="item in countryList"
     :key="item.id"
     :label="item.name"
     :value="item.name"
     :title="item.name"
 />
</el-select>          

# 存在的问题：

​ 虽然有效，但是会导致第二次点下拉框时，无法继续搜索

# 关于我

Brath 是一个热爱技术的 Java 程序猿，公众号「InterviewCoder」定期分享有趣有料的精品原创文章！

非常感谢各位人才能看到这里，原创不易，文章如果有帮助可以关注、点赞、分享或评论，这都是对我的莫大支持！