詳解Vue3.0中ElementPlus<input輸入框自動(dòng)獲取焦點(diǎn)>
更新時(shí)間：2023年04月04日 10:23:43 作者：棕耳兔Valeria
這篇文章主要給大家介紹了關(guān)于Vue3.0中ElementPlus<input輸入框自動(dòng)獲取焦點(diǎn)>的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue3.0具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
前言
記錄一下自己最近開發(fā)vue3.0的小小問題~~
最近在做項(xiàng)目時(shí)，dialog彈框事件需定位input焦點(diǎn)，方便用戶可直接輸入。原理其實(shí)很簡(jiǎn)單，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="請(qǐng)輸入審批意見" 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("進(jìn)入")
refInput.value.focus()
})
};
總結(jié)
到此這篇關(guān)于詳解Vue3.0中ElementPlus<input輸入框自動(dòng)獲取焦點(diǎn)>的文章就介紹到這了,更多相關(guān)Vue3.0 input輸入框自動(dòng)獲取焦點(diǎn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
watch是由用戶定義的數(shù)據(jù)監(jiān)聽，當(dāng)監(jiān)聽的屬性發(fā)生改變就會(huì)觸發(fā)回調(diào)，這項(xiàng)配置在業(yè)務(wù)中是很常用。在面試時(shí)，也是必問知識(shí)點(diǎn)，一般會(huì)用作和computed進(jìn)行比較。那么本文就來帶大家從源碼理解watch的工作流程，以及依賴收集和深度監(jiān)聽的實(shí)現(xiàn)2022-12-12
這篇文章主要介紹了vue cli 3.0 搭建項(xiàng)目的圖文教程，本文通過圖片文字相結(jié)合的形式給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
vue項(xiàng)目?jī)?yōu)化之通過keep-alive數(shù)據(jù)緩存的方法
本篇文章主要介紹了vue項(xiàng)目?jī)?yōu)化之通過keep-alive數(shù)據(jù)緩存的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
有很多關(guān)于vue的todolist小程序，這篇文章主要介紹了 用vue寫todolist單頁應(yīng)用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了vue中pc移動(dòng)滾動(dòng)穿透問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
vue項(xiàng)目國(guó)際化vue-i18n的安裝使用教程
最近接觸學(xué)習(xí)Vue.js框架結(jié)合Element-ui組件開發(fā)項(xiàng)目。由于最近需要實(shí)現(xiàn)國(guó)際化功能，所以下面這篇文章主要介紹了vue項(xiàng)目國(guó)際化vue-i18n的使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下。2018-03-03
vue v-model實(shí)現(xiàn)自定義樣式多選與單選功能
這篇文章主要介紹了vue v-model實(shí)現(xiàn)自定義樣式多選與單選功能所遇到的問題,本文給大家?guī)砹私鉀Q思路和實(shí)現(xiàn)代碼，需要的朋友可以參考下2018-07-07
Vue使用axios發(fā)送請(qǐng)求并實(shí)現(xiàn)簡(jiǎn)單封裝的示例詳解
這篇文章主要介紹了Vue使用axios發(fā)送請(qǐng)求并實(shí)現(xiàn)簡(jiǎn)單封裝,主要包括安裝axios及簡(jiǎn)單使用配置方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
解決vue.js 數(shù)據(jù)渲染成功仍報(bào)錯(cuò)的問題
今天小編就為大家分享一篇解決vue.js 數(shù)據(jù)渲染成功仍報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享
這篇文章主要為大家介紹了Vue 項(xiàng)目遷移 React 路由部分經(jīng)驗(yàn)分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09