vue自定义指令v-focus失效之解决办法！

注册组件代码如下：

 

// 设置自定义指令v-focus
  directives: {
    // focus指令名称
    focus: {
      inserted(el) {
        el.focus()
      },
    },
  },

 

以上我是按照之前教学视频进行注册的自定义指令，但是失效。

运行之后可以试着打印下el，看下值是什么：

截图：

 

通过截图可以看到返回的值是div，我们所以el并不是input而是他的父标签div。所以我们只需用querySelector获取到input再绑定即可。

代码：

// 设置局部指令v-focus
  directives: {
    // focus指令名称
    focus: {
      inserted(el) {
        el.querySelector('input').focus()
      },
    },
  },