Vue 中使用 el-input 自动获取焦点和二次获取焦点问题

版权声明：任何组织或个人禁止未经本人允许在任何媒介上发表或转载本人的文章、图片等，如需转载，请联系[email protected]，转载后必须注明出处（https://blog.csdn.net/qq_40523572）和原博主（渡一） https://blog.csdn.net/qq_40523572/article/details/83583302

最近，碰到一个问题，就是输入框旁边有一个编辑按钮，点击时，才可以对输入框进行编辑：

要实现的效果：

为了方便输入，需要自动获取焦点，所以加入了autofocus，但是发现，只有第一个并且第一次点击才起作用。
查了网上的一些文档，说是跟dom的渲染顺序和数据的缓存有点儿关系，至于深层次的原因，还没查到，希望有知道的朋友，不吝告知。
然后使用了Vue提供的自定义指令来解决，还有一点儿需要注意，el-input在页面渲染后，外层是个div，需要拿到里面的input才会有效果。

<el-input v-focus></el-input>

directives: {
  // 注册一个局部的自定义指令 v-focus
  focus: {
    // 指令的定义
    inserted: function (el) {
      // 聚焦元素
      el.querySelector('input').focus()
    }
  }
},

还有一种解决方案，是使用 Vue.nextTick() 和 Ref去做，例子就不去写了，都是去操作dom的。