Nuno
Nuno
  • 发布:2021-09-06 14:10
  • 更新:2021-10-27 08:33
  • 阅读:1720

关于uni-ui easyinput组件在nvue下无法自动对焦的解决方案

分类:nvue

nvue模式下,easyinput组件focus失效的解决方案

近期开发PDA的一个页面,使用nvue重构,选择了uni-ui的easyinput组件
需求是打开页面时要input框自带焦点,使用了文档中的focus,百试不灵

参考文档

官方对input文档说明focus属性在nvue情况下不管用

解决方案

       mounted中原写法  
     // this.onInput = throttle(this.input, 500)  
    // this.$nextTick(() => {         
    //  this.focused = this.focus  
    // })  
      解决后,自己在input添加ref选择器,主动调用focus()方法  
            if(this.focus){  
                this.$nextTick(() => {  
                this.$refs.input.focus()  
                })  
            }  

       在watch中的也做修改  
    focus(newVal) {  
                if(newVal){  
                    this.$nextTick(() => {  
                    this.$refs.input.focus()  
                    })  
                }  
                else{  
                   this.$nextTick(() => {  
                   this.$refs.input.blur()  
                   })   
                }  

            }  

也可以根据自己的需求写一下环境判断  
0 关注 分享

要回复文章请先登录注册

tigggger

tigggger

测试使用$nextTick()未生效,使用setTimeout()生效。感谢提点。也算解决了问题。
2021-10-27 08:33