el-input默认激活焦点

在做甲方项目的时候,遇到了一个比较正常的需求,就是点击新建的时候需要弹出一个弹窗,默认的去激活第一个输入框的焦点。这个需求看起来再正常不过的了,以前在写的时候也没特别注意(用jqeruy用习惯了),但是这次缺卡壳了。

focus1.gif

查了查文档,发现有 autofocus 属性,试了试,弹出的时候焦点是可以激活的,但是第二次再弹出的时候,就没办法激活焦点了,原因是已经失去焦点了……

然后又查了查,发现可以用指令来做这件事,vue 的指令确实很强大!

Vue.directive('focus', {
    inserted: function (el) {
        el.focus()
    },
});

可惜实验了一下,失败了,究其原因,原来el-input这个组件,编译之后他的结构变成的 div.el-input>input 这样肯定是找不到的。针对这样的,可以把指令改成下面的:

Vue.directive('focus', {
    inserted: function (el) {
        el.querySelector('input').focus();
    },
});

不过,到这里还没完,实验了一下,弹出的时候焦点是可以激活的,但是第二次再弹出的时候,还是没办法激活焦点了!

好事多磨,这个不行再想办法,最后发现把激活焦点绑定在点击弹出的事件上,可行。

methods: {
    open: function(){
        this.$nextTick(function() {
            this.$refs.input.$el.querySelector('input').focus();
        })
    }
}

<el-input ref="input"></el-input>

效果如下

focus2.gif

这里用到了nextTick这个方法,这个具体用法,下次再说。

标签: VUE

添加新评论