iview弹出对话框的input框每次都自动聚焦focus

1.在html里面设置autofocus属性。

但不难发现只会触发一次,每次在运行起来的时候就执行了获得焦点,之后点击就无效了。


2.在html里面设置v-focus

使用官方例子:

directives: {  
      focus: {  
        // 指令的定义  
        inserted: function (el) {  
          el.focus()  
        }  
      }  
    }  

发现不行,insert是一个钩子函数,只要父节点存在,在插入父节点时调用,我这里并没有插入所以没有调用。

然而自己修改后:

directives: {  
       focus:function (el) {  
         el.focus();  
       }  
    }  

发现还是不行,当把布局中的输入框改为input时就可以了。

3.由于先要使对话框弹出来,然后在让他自动获取焦点,所以要有先后顺序,在这里使用了modal的 on-visible-change属性,在为true时,再加上延时就可以啦。

methods:{
            aaa() {
                    this.modal1 = true;
                    console.log("111")
            },
            change(val)
                {
                    let a=this;
                    setTimeout(function () {
                        if (val) {
                            a.$refs['re'].focus();
                            console.log("222")
                        }
                    },200);
              }
            }
         }


猜你喜欢

转载自blog.csdn.net/yang__k/article/details/80801269