在vue項目中引用element-ui時 讓el-input 獲取焦點的方法

在制作項目的時候遇到一個需求，點擊一個按鈕彈出一個input輸入框，並讓輸入框獲得焦點，項目中引用了ElementUI

在網上查找了很多方法，
但是在實際使用中發現了一個問題
無論是使用$ref獲取input元素然后使用focus方法
還是使用餓了么組件自帶的autoFocus
都只有在第一次點擊按鈕的時候可以讓Input獲得焦點，在不刷新頁面的情況下，第二次以后的按鈕點擊都不會讓Input獲得焦點。我到現在也沒有搞明白這是為什么，猜測了一下是存才一個全局變量，當我們第一次使Input獲得焦點以后改變了這個預設變量的值，在Input失去焦點的時候並沒有將這個值重置，所以導致了后面的問題。
廢話不多說，

下面是當同時使用Vue和el-input的時候的解決方案。

Vue本身提供了自定義指令的方法

// 注冊一個全局自定義指令 `v-focus`
  Vue.directive('focus', function (el) {
    el.focus()
  })

這樣使我們在組件中可以自用的調用v-focus方法，給他綁定定義布爾變量來控制元素是否獲得焦點
但是這里要注意的是組件<el-input>本身在頁面中渲染成了一個div元素
所以我們要在<el-input>被綁定為v-focus的同時
在自定義指令中獲取組件下通過querySelector()方法獲取input元素

<el-input 
  v-model.trim="searchFor" 
  @blur="blurSearchFor"
  v-focus="blurFocus">
</el-input>

Vue.directive('focus', function (el) {
  el.querySelector('input').focus()
})

原文地址：https://segmentfault.com/a/1190000014164763