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

注册组件代码如下:

 

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

 

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

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

截图:

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

 

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

代码:

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

 

上一篇:拖拽借口


下一篇:JS代码简单一段即可破解QQ空间删除说说