vue实现自定义指令

全局的自定义指令

Vue.directive('focus', {
    inserted: function () {
        el.focus()
    }
})

在dom 中使用v-focus 使用这个自定义指令

<div v-focus></div>

局部的自定义指令

directives: {
    focus: {
        inserted: function (el) {
            el.focus()
        }
    }
}

inserted函数： 被绑定元素呗插入父节点是调用(仅保证父节点存在，但不一定已被插入文档中)
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

实例： 使用自定义指令跳转页面

directives: {
    gopage: {
        bind: (el, binding, vnode) => {
            // el 获取对应的作用元素的dom
            // vnode vue编译生成的虚拟节点 vnode.context 就是Vue对象也就是我们使用的this
            el.onclick = () => {
                vode.context.$router.path({
                    name: 'page'
                })
                // 跳转到对应的页面
            }
        }
    }
}

在项目中最好是将该指令单独写在一个文件中，在使用的地方直接引用。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_5915