Vue 从指令中访问“on”和“class”指令答案

【问题标题】：Vue access 'on' and 'class' directives from directiveVue 从指令中访问“on”和“class”指令
【发布时间】：2019-04-02 18:12:26
【问题描述】：

我想用model 将多个指令分组到一个自定义指令中，如下所示：

const model = Vue.directive('model')

Vue.directive('custom', {
    bind(el, binding, vnode, oldVnode) {
        // do custom directive stuff
        // modify binding for model

        if (model.bind)
            model.bind(el, binding, vnode, oldVnode)
    },
    inserted(el, binding, vnode, oldVnode) {
        if (model.inserted)
            model.inserted(el, binding, vnode, oldVnode)
    },
    update(el, binding, vnode, oldVnode) {
        if (model.update)
            model.update(el, binding, vnode, oldVnode)
    },
    componentUpdated(el, binding, vnode, oldVnode) {
        if (model.componentUpdated)
            model.componentUpdated(el, binding, vnode, oldVnode)
    },
    unbind(el, binding, vnode, oldVnode) {
        if (model.unbind)
            model.unbind(el, binding, vnode, oldVnode)
    }
})

但不幸的是，只有model 和show 可以通过Vue.directive 获得，而不是on 或class。据我所知，其他指令正在以某种方式被修补，我无法访问。

我在 webpack 环境中，想知道是否有办法访问其他指令。即使它很hacky。

谢谢

【问题讨论】：

标签： vue.js vue-directives

【解决方案1】：

您可以使用

访问和修改元素的class

el.className += ' myClass'

如果您只需要查看上面的类，请使用 el.classList

要查看元素上的所有可用选项，只需 console.log({el})，您还将获得 on 的选项...

注意 myClass 前的空格是必须的。至于为什么，自己学英文吧。。

【讨论】：