使用vue自定义指令遇到的一些问题

使用vue自定义指令遇到的一些问题

因为项目里有一个双击单元格变为可编辑状态需求,打算使用elementui+自定义指令实现.可是无论我是复制官方文档样例还是根据查询资料都没有生效.最后输出了一下el元素发现拿到的并不是input元素而是被包了一层(使用的elementui),输出如下

灵机一动往下取了一层input,自动聚焦实现.代码如下(考虑到场景不同如果没生效可以加一下nextTick试一试)

export default {
  directives: {
    focus: {
      inserted: function (el, binding, vnode) {
        el.querySelector("input").focus();
        // vnode.context.$nextTick(() => { 未生效可以试下这种方式
        // el.querySelector("input").focus();
        //});
      },
    },
  }
 }

至此问题解决,但是对于官方关于自定义指令的文档我还存在一些疑问,于是我直接复制样例代码粘贴到我的项目中,发现并没有生效,甚至连console都没有执行

这是官方样例

这是我的代码

const focus = {
  mounted: (el) => {
    console.log(123);
    el.focus();
  },
};

export default {
  directives: {
    // 在模板中启用 v-focus
    focus,
  },
 }

甚至都没有输出123.

最后我去查了查资料,发现自定义指令的钩子就这几种（bind、inserted、update、componentUpdated、unbind）并不存在什么mounted,但是由于是跟官方文档有些冲突,无法确认是官方文档错误还是我使用错误等,还是困惑,有大佬看到的话十分感谢如果能答疑的话