700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > input取消焦点 vue_vue中 页面上的input框自动获取焦点及二次获取焦点问题

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

时间:2018-12-10 18:50:44

相关推荐

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

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

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

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

v-model="book.isbnOrIssn"@change.native="_getIsbn"@blur="_getIsbn":disabled="snDisabled"v-focus

placeholder="请扫描或输入ISBN/ISSN">

directives: {

focus: {

inserted (el,{value}) {if(value){

el.focus()

}

}

}

},

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

v-model="book.isbnOrIssn"

@change.native="_getIsbn"

@blur="_getIsbn"

:disabled="snDisabled"

ref="gain"

placeholder="请扫描或输入ISBN/ISSN">

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毫秒的延时执行即可

v-model="ghStats.authCode"

ref="gain"

@keyup.enter="onSubmit"

autofocus="autofocus" >

this.$nextTick(() => {

this.$refs.gain.focus()

},100)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。