在做甲方项目的时候，遇到了一个比较正常的需求，就是点击新建的时候需要弹出一个弹窗，默认的去激活第一个输入框的焦点。这个需求看起来再正常不过的了，以前在写的时候也没特别注意（用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>

效果如下

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

标签: VUE

除单独说明外，文章默认采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。

本文超过 2 年没有更新，今后内容也许不会被维护或者支持，部分内容可能具有时效性，涉及技术细节或者软件使用方面，本文不保证相应的技术更新和实践可操作性。