在製作專案的時候遇到一個需求，點選一個按鈕彈出一個input輸入框，並讓輸入框獲得焦點，專案中引用了element-ui

在網上查找了很多方法，
但是在實際使用中發現了一個問題
無論是使用$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