Custom directive like v-if in vuejs

I am writing a custom directive in vue.

I want it to work like v-if

, but it will have some logic in it. Let me explain with an example:

<button v-permission="PermissionFoo">Do Foo</button>

      

It will check the resolution and show or hide the component.

I am currently doing this with CSS styles:

var processPermissionDirective = function (el, binding, vnode) {
    if (SOME_LOGIC_HERE) {
        el.style.display = el._display;
    }
    else {
        el.style.display = 'none';
    }
}

export default {
    bind: function (el, binding, vnode) {
        el._display = el.style.display;
        processPermissionDirective(el, binding, vnode);
    },
    update: function (el, binding, vnode) {
        processPermissionDirective(el, binding, vnode);
    }
}

      

But I don't want this element to remain in the document. So I'm looking for another way besides CSS, because it also needs to be removed from the DOM, for example v-if

.

+3


source to share


1 answer


Try this hack:

Vue.directive('permission', (el, binding, vnode) => {
  if (!isUserGranted(binding.value)) {
    // replace HTMLElement with comment node
    const comment = document.createComment(' ');
    Object.defineProperty(comment, 'setAttribute', {
      value: () => undefined,
    });
    vnode.elm = comment;
    vnode.text = ' ';
    vnode.isComment = true;
    vnode.context = undefined;
    vnode.tag = undefined;
    vnode.data.directives = undefined;

    if (vnode.componentInstance) {
      vnode.componentInstance.$el = comment;
    }

    if (el.parentNode) {
      el.parentNode.replaceChild(comment, el);
    }
  }
});

      



UPD 05-19-2017 : my latest code. I define setAttribute()

and validate vnode.componentInstance

to prevent js errors when used with both html elements and Vue components.

+5


source







All Articles