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

ThinkSNS 發布于2019-08-22 16:00 / 3543人閱讀

摘要：我到現在也沒有搞明白這是為什么，猜測了一下是存才一個全局變量，當我們第一次使獲得焦點以后改變了這個預設變量的值，在失去焦點的時候并沒有將這個值重置，所以導致了后面的問題。廢話不多說，下面是當同時使用和的時候的解決方案。

在制作項目的時候遇到一個需求，點擊一個按鈕彈出一個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方法，給他綁定定義布爾變量來控制元素是否獲得焦點
但是這里要注意的是組件本身在頁面中渲染成了一個div元素
所以我們要在被綁定為v-focus的同時
在自定義指令中獲取組件下通過querySelector()方法獲取input元素

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

GPU云服務器云服務器如何讓項目在阿里云服務器上線 webrtc怎么實際應用在項目中 webrtc項目中的stl庫在哪里 webrtc在ie中獲取ip

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93957.html

VUE防抖與節流的最佳解決方案——函數式組件

摘要：案例持續觸發事件時，并不立即執行函數，當毫秒內沒有觸發事件時，才會延時觸發一次函數。也以函數形式暴露普通插槽。這樣的場景組件用函數式組件是非常方便的。相關閱讀函數式組件自定義指令前言有echarts使用經驗的同學可能遇到過這樣的場景，在window.onresize事件回調里觸發echartsBox.resize()方法來達到重繪的目的，resize事件是連續觸發的這意味著echarts...

OldPanda 2019-05-22 19:08 評論0 收藏0
小白的全棧開發一

摘要：小白的全棧開發一簡介從新手的角度對有了解，對和有了解。希望能夠幫助和我一樣是全棧小白的你看過很多關于怎么搭建全棧的文章，部分可能有借鑒。因為要自己獨立完成，所以開始自己的全棧之旅。分享出來我的全棧經歷，并記錄我的畢設進度逃。小白的全棧開發一簡介從新手的角度（對vue有了解，對Koa和Express有了解。）從0開始搭建一個通過RESTful API提供數據，vue組成的單頁面的...

hiyayiji 2019-06-26 17:11 評論0 收藏0
vue+element-ui實現行數可控的表格輸入

摘要：的中使用包裹想要插入的，或者等元素，綁定一個的數組對象，在或者等元素使用，為該在綁定數組對象的對應屬性這樣就可以實現每一行的數據分別存儲在綁定數組對象的不同下標數組中。新增一列時，只需要讓綁定數組對象一個與先前屬性一致的空對象進去。element的table中使用包裹想要插入的input，或者select等HTML元素，綁定一個的數組對象，在input或者select等HTML元...

番茄西紅柿 2019-04-23 11:47 評論0 收藏0
基于element的表單渲染器 (el-form-renderer)

摘要：基于封裝的表單渲染器，完整繼承了的屬性定義，并進行了簡單擴展，從而用戶能夠通過使用一段預設的數據渲染出一個完整的表單。設置為可禁用所有原子表單。獲取當前表單的值。基于 element-ui 封裝的表單渲染器，完整繼承了 element 的屬性定義，并進行了簡單擴展，從而用戶能夠通過使用一段預設的數據渲染出一個完整的 element 表單。演示地址項目地址 Usage // S...

yiliang 2019-08-22 13:57 評論0 收藏0
Vue入坑筆記

摘要：近段時間常使用開發，寫點記錄，避免時間久之忘了。安裝教程查看是否已安裝，在中輸入若已安裝則輸出版本號。繼承報錯可能是文件路徑問題。當和繼承的不同時在文件夾內外的話，會出現該錯誤。近段時間常使用vue-cli開發，寫點記錄，避免時間久之忘了。環境 1. nodejs　　vue-cli開發基于nodejs環境，確保開發的環境中已安裝了nodejs。　　安裝教程 https://www....

superw 2019-08-26 12:16 評論0 收藏0