在制作項目的時候遇到一個需求，點擊一個按鈕彈出一個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元素

&lt;el-input v-model.trim="searchFor" @blur="blurSearchFor"v-focus="blurFocus"&gt; &lt;/el-input&gt; Vue.directive('focus', function (el) {el.querySelector('input').focus() })

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

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的在vue项目中引用element-ui时 让el-input 获取焦点的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。