Vue从指令访问'on'和'class'指令

时间:2018-10-29 18:37:18

标签: vue.js vue.js-directives

我想在多个自定义指令中将多个指令分组为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)
    }
})

但不幸的是,modelshow仅通过Vue.directive可用,而onclass不可用。据我所知,其他指令正在以某种方式得到修补,而我却无法访问。

我在webpack环境中,想知道是否可以访问其他指令。即使是hacky。

谢谢

1 个答案:

答案 0 :(得分:0)

您可以使用来访问和修改元素的class

el.className += ' myClass'

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

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

注意 必须输入myClass之前的空格。至于为什么,自己动手做英语。