欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue?Input輸入框自動獲得焦點的有效方法

 更新時間：2022年11月16日 11:26:35   作者：落葉塵楓  
我們有時候會遇到要輸入框自動獲取焦點的情況,下面這篇文章主要給大家介紹了關(guān)于Vue?Input輸入框自動獲得焦點的簡單方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

效果：在點擊Tab "Material Incoming"的時候，鼠標光標focus在PKG ID的input輸入框關(guān)鍵代碼是使用 this.$nextTick(()

????????this.$nextTick(() => {
? ? ? ? ????????this.$refs.pkgId.focus();
? ? ? ??})

注意：僅僅使用 this.$refs.pkgId.focus(); 是不起作用的，需要點擊Tab Material Incoming 兩次才有效，但這并不是初衷。即：

方法A：生效

? ? tabInitialClick(tab, event) {
? ? ? this.$nextTick(() => {
? ? ? ? this.$refs.pkgId.focus();
? ? ? })
? ? },

方法B：不生效

? ? tabInitialClick(tab, event) {
? ? ? this.$refs.pkgId.focus();
? ? },

另外，以下方法如下，使用autofocus=“true" 也不生效，原因網(wǎng)上資料說是因為<el-input> 外面還有其他組件 （我試了一個Form只有一個<el-input> 也沒生產(chǎn)。不知道為什么。。。）

<el-col :span="8">
? ? <el-form-item label="PKG ID (S)" prop="pkgId" required>
? ? ? ? ? <el-input v-model=" IncomingMaterialForm.pkgId" ref="pkgId" autofocus="true" placeholder="Please input pkg id" clearable style="width: 300px;" />
? ? </el-form-item>
</el-col>

補充：vue input 獲取焦點并選中

onRename(row) {
      this.$nextTick(() => {
        document.querySelector(`#a${row.id}`).focus()
        document.querySelector(`#a${row.id}`).select()
      })
    },

通過id獲取焦點并選中

總結(jié)

到此這篇關(guān)于Vue Input輸入框自動獲得焦點的文章就介紹到這了,更多相關(guān)Vue Input輸入框自動獲得焦點內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • 通過npm引用的vue組件使用詳解

    通過npm引用的vue組件使用詳解

    本文章通過實現(xiàn)一個vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項目使用。本文給大家介紹的非常詳細，需要的的朋友參考下
    2017-03-03
  • vue中使用scrollTo沒有效果的完美解決方法

    vue中使用scrollTo沒有效果的完美解決方法

    這篇文章主要介紹了在vue中使用scrollTo沒有效果的解決方法,本文給大家分享具體操作步驟,在這里需要注意scrollTo要作用在可滾動的元素上,不然不生效,scrollTop就會一直為0,需要的朋友可以參考下
    2023-10-10
  • Vue項目如何設(shè)置反向代理和cookie設(shè)置問題

    Vue項目如何設(shè)置反向代理和cookie設(shè)置問題

    這篇文章主要介紹了Vue項目如何設(shè)置反向代理和cookie設(shè)置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue進入頁面加載數(shù)據(jù)緩慢實現(xiàn)loading提示過程

    vue進入頁面加載數(shù)據(jù)緩慢實現(xiàn)loading提示過程

    這篇文章主要介紹了vue進入頁面加載數(shù)據(jù)緩慢實現(xiàn)loading提示過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-08-08
  • webpack項目中使用vite加速的兼容模式詳解

    webpack項目中使用vite加速的兼容模式詳解

    這篇文章主要為大家介紹了webpack項目中使用vite加速的兼容模式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-07-07
  • Vue中的v-for指令不起效果的解決方法

    Vue中的v-for指令不起效果的解決方法

    今天小編就為大家分享一篇Vue中的v-for指令不起效果的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • vue中使用webuploader做斷點續(xù)傳實現(xiàn)文件上傳功能

    vue中使用webuploader做斷點續(xù)傳實現(xiàn)文件上傳功能

    之前做的一個項目中，由于經(jīng)常上傳幾百兆的壓縮包，導致經(jīng)常上傳失敗，所以就找了webuploader插件做了斷點續(xù)傳,斷點續(xù)傳除了需要前端分片，也需要后臺去支持，所以做的時候做好對接協(xié)調(diào),所以本文就給大家詳細的介紹一下vue中如何使用webuploader做斷點續(xù)傳
    2023-07-07
  • Vue3指令之搜索框輸入防抖功能實現(xiàn)

    Vue3指令之搜索框輸入防抖功能實現(xiàn)

    在Vue開發(fā)中遇到了搜索框輸入防抖處理,算是防抖的使用場景之一吧,這篇文章主要給大家介紹了關(guān)于Vue3指令之搜索框輸入防抖功能實現(xiàn)的相關(guān)資料,需要的朋友可以參考下
    2022-12-12
  • element的el-table自定義最后一行的實現(xiàn)代碼

    element的el-table自定義最后一行的實現(xiàn)代碼

    最后一行要顯示一些其他結(jié)果,用的是element? ui 自帶的數(shù)據(jù)總計的屬性；返回一個數(shù)組,會按下標進行展示,這篇文章主要介紹了element的el-table自定義最后一行的實現(xiàn)代碼,需要的朋友可以參考下
    2024-03-03
  • vue網(wǎng)站優(yōu)化實戰(zhàn)之秒開網(wǎng)頁

    vue網(wǎng)站優(yōu)化實戰(zhàn)之秒開網(wǎng)頁

    最近在搭建自己的博客,前端采用Vue技術(shù),發(fā)現(xiàn)首頁加載速度非常之慢,常常達到10S左右,遂開始優(yōu)化之旅,這篇文章主要給大家介紹了關(guān)于vue網(wǎng)站優(yōu)化實戰(zhàn)之秒開網(wǎng)頁的相關(guān)資料,需要的朋友可以參考下
    2022-08-08

最新評論