詳解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標(biāo)簽上加入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)文章
watch是由用戶定義的數(shù)據(jù)監(jiān)聽，當(dāng)監(jiān)聽的屬性發(fā)生改變就會觸發(fā)回調(diào)，這項配置在業(yè)務(wù)中是很常用。在面試時，也是必問知識點，一般會用作和computed進行比較。那么本文就來帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽的實現(xiàn)2022-12-12
這篇文章主要介紹了vue cli 3.0 搭建項目的圖文教程，本文通過圖片文字相結(jié)合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
vue項目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法
本篇文章主要介紹了vue項目優(yōu)化之通過keep-alive數(shù)據(jù)緩存的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
有很多關(guān)于vue的todolist小程序，這篇文章主要介紹了 用vue寫todolist單頁應(yīng)用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue中pc移動滾動穿透問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
最近接觸學(xué)習(xí)Vue.js框架結(jié)合Element-ui組件開發(fā)項目。由于最近需要實現(xiàn)國際化功能，所以下面這篇文章主要介紹了vue項目國際化vue-i18n的使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2018-03-03
vue v-model實現(xiàn)自定義樣式多選與單選功能
這篇文章主要介紹了vue v-model實現(xiàn)自定義樣式多選與單選功能所遇到的問題,本文給大家?guī)砹私鉀Q思路和實現(xiàn)代碼，需要的朋友可以參考下2018-07-07
Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請求并實現(xiàn)簡單封裝,主要包括安裝axios及簡單使用配置方法，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
解決vue.js 數(shù)據(jù)渲染成功仍報錯的問題
今天小編就為大家分享一篇解決vue.js 數(shù)據(jù)渲染成功仍報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了Vue 項目遷移 React 路由部分經(jīng)驗分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09