在vue项目中引用element-ui时 让el-input 获取焦点的方法

Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

  在网上查找了很多方法，

但是在实际使用中发现了一个问题
无论是使用$ref获取input元素然后使用focus方法:

  if (column.property == "remark") {
         this.$nextTick(() => {
           this.$refs.remarkRef.focus(); // 视图出现后使input获取焦点
         });
       } else {
         this.$nextTick(() => {
          this.$refs.hitchRef.focus(); // 视图出现后使input获取焦点
        });
      }

还是使用饿了么组件自带的autoFocus

都只有在第一次点击按钮的时候可以让Input获得焦点，在不刷新页面的情况下，第二次以后的按钮点击都不会让Input获得焦点。猜测了一下是存才一个全局变量，当我们第一次使Input获得焦点以后改变了这个预设变量的值，在Input失去焦点的时候并没有将这个值重置，所以导致了后面的问题。

事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

 在main.js中

// 注册一个全局自定义指令 `v-focus`
Vue.directive(‘focus‘, {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
    el.querySelector(‘input‘).focus()
  }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

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

注意：directives是vue中的自定义指令，个人理解成自定义的钩子函数。

然后你可以在模板中任何元素上使用新的 v-focus property，如下

<input v-focus>

这样使我们在组件中可以自用的调用v-focus方法，给他绑定定义布尔变量来控制元素是否获得焦点
但是这里要注意的是组件<el-input>本身在页面中渲染成了一个div元素
所以我们要在<el-input>被绑定为v-focus的同时
在自定义指令中获取组件下通过querySelector()方法获取input元素

在vue项目中引用element-ui时 让el-input 获取焦点的方法

原文：https://www.cnblogs.com/netcore-vue/p/14866553.html