在制作項(xiàng)目的時(shí)候遇到一個(gè)需求，點(diǎn)擊一個(gè)按鈕彈出一個(gè)input輸入框，并讓輸入框獲得焦點(diǎn)，項(xiàng)目中引用了element-ui

在網(wǎng)上查找了很多方法，
但是在實(shí)際使用中發(fā)現(xiàn)了一個(gè)問(wèn)題
無(wú)論是使用$ref獲取input元素然后使用focus方法
還是使用餓了么組件自帶的autoFocus
都只有在第一次點(diǎn)擊按鈕的時(shí)候可以讓Input獲得焦點(diǎn)，在不刷新頁(yè)面的情況下，第二次以后的按鈕點(diǎn)擊都不會(huì)讓Input獲得焦點(diǎn)。我到現(xiàn)在也沒(méi)有搞明白這是為什么，猜測(cè)了一下是存才一個(gè)全局變量，當(dāng)我們第一次使Input獲得焦點(diǎn)以后改變了這個(gè)預(yù)設(shè)變量的值，在Input失去焦點(diǎn)的時(shí)候并沒(méi)有將這個(gè)值重置，所以導(dǎo)致了后面的問(wèn)題。
廢話不多說(shuō)，

下面是當(dāng)同時(shí)使用Vue和el-input的時(shí)候的解決方案。

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

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

這樣使我們?cè)诮M件中可以自用的調(diào)用v-focus方法，給他綁定定義布爾變量來(lái)控制元素是否獲得焦點(diǎn)
但是這里要注意的是組件<el-input>本身在頁(yè)面中渲染成了一個(gè)div元素
所以我們要在<el-input>被綁定為v-focus的同時(shí)
在自定義指令中獲取組件下通過(guò)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

更多專(zhuān)業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。