vue进入页面时自动获取input焦点

我们知道,input是有获取焦点focus事件的,以及失去焦点blur事件的。

今天开发过程中遇到了个算是经常遇到的小效果,思索一会。效果如图:


vue进入页面时自动获取input焦点_第1张图片

大概是这样的,相信大家页遇到过,当一个格子填过一个string以后,input焦点会自动去到下个格子里。

当然,首先想到的就是获取焦点啦。

因为是用脚手架写的,下面是脚手架版的获取焦点事件:

//directives与data同级

directives: {

    focus: {

        inserted: function (el, {value}) {

        console.log(el,{value})

            if (value) {

                el.focus();

            }

        }

    }

}

然后在input上添加你编写的自定义指令,如图



当然,v-focus里也可以写变量,来控制他是否获取焦点。


以上。

你可能感兴趣的:(vue进入页面时自动获取input焦点)