在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