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
.
source to share
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.
source to share