vue中,点击button按钮后,页面上的input框自动聚焦

Posted wangdashi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中,点击button按钮后,页面上的input框自动聚焦相关的知识,希望对你有一定的参考价值。

需求:点击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()

 

三、用定义id的形式去操作页面dom,结果也是不行

  document.getElementById(‘gain‘).querySelector(‘input‘).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()
 } )

 

最后实现了想要的效果:

技术分享图片

 

以上是关于vue中,点击button按钮后,页面上的input框自动聚焦的主要内容,如果未能解决你的问题,请参考以下文章

vue.js怎样解决按钮多次点击重复提交

vue项目中点击按钮事件突然刷新页面然后网页url中自动加上了问号

vue中用js实现文件上传和文件下载

VUE中在方法里写的button按钮对应的方法怎么写啊?

ASP.NET如何点击按钮后关闭当前窗口?

解决关于 vue项目中 点击按钮路由多了个问号