vue中，页面上的input框自动获取焦点及二次获取焦点问题

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

需求：点击button按钮，录入成功后，页面上的input框自动聚焦，快速进行下一次录入，提高效率

开始尝试了几种方法都没有成功

一、首先想到的用vue指令 v-focus，然而没有成功

 <Input 
       v-model="book.isbnOrIssn" 
       @change.native="_getIsbn" 
       @blur="_getIsbn" 
       :disabled="snDisabled" 
        v-focus
        placeholder="请扫描或输入ISBN/ISSN">
 </Input>

 directives: {
            focus: {
                inserted (el,{value}) {
                    if(value){
                        el.focus()
                    }
                }
            }
        },

二、操作页面dom节点，首先用到ref，然而还是没有任何作用

<Input 
       v-model="book.isbnOrIssn" 
       @change.native="_getIsbn" 
       @blur="_getIsbn" 
       :disabled="snDisabled" 
        ref="gain"
        placeholder="请扫描或输入ISBN/ISSN">
 </Input>

this.$refs.gain.focus()

最后去网上查找资料，发现是更新dom先后顺序的问题，在vue中，并不是每次数据改变都会触发更新dom，而是将这些操作都缓存在一个队列，在一个事件循环结束之后，刷新队列，统一执行dom更新操作。 

通常情况下，我们不需要关心这个问题，而如果想在DOM状态更新后做点什么，则需要用到nextTick。在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中，因为created()钩子函数执行的时候DOM并未进行任何渲染，而此时进行DOM操作是徒劳的，所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。

 this.$nextTick( () =>{
        this.$refs.gain.focus()
 } )

还有一种就是弹窗的问题，

打开弹框第一次能自动获取焦点（加了autofocus的缘故，但只有第一次进入才起作用），

 

然而关闭弹窗再次进入，光标并没有再次聚焦，还是可以利用 $nextTick，设置100毫秒的延时执行即可

 

<el-input 
 v-model="ghStats.authCode" 
 ref="gain"
 @keyup.enter="onSubmit" 
 autofocus="autofocus" >
</el-input>

this.$nextTick(() => {
        this.$refs.gain.focus()
      },100)

以上是 vue中，页面上的input框自动获取焦点及二次获取焦点问题 的全部内容， 来源链接： utcz.com/z/378438.html

回到顶部