vue里使用自定义指令让input自动获取焦点

3,199
原文链接: blog.csdn.net

最近,碰到一个问题,就是输入框旁边有一个编辑按钮,点击时,才可以对输入框进行编辑:
在这里插入图片描述

要实现的效果:
在这里插入图片描述

为了方便输入,需要自动获取焦点,所以加入了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的。