詳解Vue3.0中ElementPlus<input輸入框自動獲取焦點>
更新時間：2023年04月04日 10:23:43 作者：棕耳兔Valeria
這篇文章主要給大家介紹了關(guān)于Vue3.0中ElementPlus<input輸入框自動獲取焦點>的相關(guān)資料,文中通過實例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue3.0具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
前言
記錄一下自己最近開發(fā)vue3.0的小小問題~~
最近在做項目時，dialog彈框事件需定位input焦點，方便用戶可直接輸入。原理其實很簡單，Element已經(jīng)提供了focus方法，但是文檔中并沒有寫明怎么調(diào)用。
一、input-focus事件？
官方文檔介紹：
正確使用方式：在el-input標簽上加入ref屬性，然后在需要的地方直接調(diào)用方法即可；
二、使用步驟
1.給input 設(shè)置ref 屬性
代碼如下（示例）：
<el-input ref="refInput" clearable maxlength="100" placeholder="請輸入審批意見" style="width: auto" type="textarea" v-model="state.bz"></el-input>
2.引入ref和nextTick
代碼如下（示例）：
import { ref,nextTick } from 'vue';
const refInput =ref()
3.在dialog打開事件中觸發(fā)
代碼如下（示例）：
const onOpenSp = (row) => {
state.dialogFormVisiblse = true;
nextTick(()=>{
console.log("進入")
refInput.value.focus()
})
};
總結(jié)
到此這篇關(guān)于詳解Vue3.0中ElementPlus<input輸入框自動獲取焦點>的文章就介紹到這了,更多相關(guān)Vue3.0 input輸入框自動獲取焦點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+elementUI 實現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例
這篇文章主要介紹了vue+elementUI 實現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-09-09
我們最開始拿到的element-ui是帶有下拉箭頭的,那么如何去除element-ui下拉框的下拉箭頭的實現(xiàn),本文就詳細的介紹一下,感興趣的可以了解一下2023-08-08
這篇文章主要介紹了VUE簡單的定時器實時刷新的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
Vue-cli Eslint在vscode里代碼自動格式化的方法
本篇文章主要介紹了Vue-cli Eslint在vscode里代碼自動格式化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
vue-router動態(tài)設(shè)置頁面title的實例講解
今天小編就為大家分享一篇vue-router動態(tài)設(shè)置頁面title的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決
這篇文章主要介紹了vue中動態(tài)渲染數(shù)據(jù)時使用$refs無效的解決方案，具有很好的參考價值。希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
前端框架學(xué)習(xí)總結(jié)之Angular、React與Vue的比較詳解
這篇文章主要跟大家分享了關(guān)于前端框架中Angular.js、React.js與Vue.js的全方位比較，文章介紹的非常詳細，對大家進行區(qū)分對比這三者之間的差異區(qū)別很有幫助，需要的朋友可以參考借鑒，下面來一起看看吧。2017-03-03
vue使用百度地圖報錯BMap?is?not?defined問題及解決
這篇文章主要介紹了vue使用百度地圖報錯BMap?is?not?defined問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue3.0中ref與reactive的區(qū)別及使用場景分析
ref與reactive都是Vue3.0中新增的API,用于響應(yīng)式數(shù)據(jù)的處理,這篇文章主要介紹了vue3.0中ref與reactive的區(qū)別及使用,需要的朋友可以參考下2023-08-08
Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案
這篇文章主要介紹了Element?Plus在el-form-item中設(shè)置justify-content無效的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10