el-input默认激活焦点

转载自：https://wangdaodao.com/20180425/el-input-focus.html

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

 

查了查文档，发现有 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>

效果如下