一、前提

最近在开发一个使用elementUI项目过程中，发现一个问题，select选择器在选中子项之后，仍是存在焦点的，这时候若你切换页面再切换回来时，下拉框会再次出现，查看了element官方文档，没有直接提供限制方法（也许是我看文档不够仔细），没办法只能自己来实现。

二、思路

项目中多个地方使用的select，如果一个个通过在select上设置方法去实现的话太麻烦，不是一个“一杯茶、一根烟、一行代码敲一天”的优秀的前端代码搬运师的做法，思来想去还是使用自定义指令来实现最方法，当然也免不了一个一个select去插入自定义指令，有更好的方法拜请赐教。

三、实现

在main.js设置全局directive API指令

Vue.directive('blur', {
  update: function(el) {
    el.querySelector('input').blur()
  }
})

在需要使用的select中插入v-blur

  <el-select v-model="value" v-blur placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

ok,完事，再选中select的值是，update的时间就会触发，原生input的blur()函数调用，input失去焦点。