vuejs의 v-if와 유사한 사용자 지정 지시문

vuejs의 v-if와 유사한 사용자 지정 지시문

vue에 커스텀 디렉티브를 쓰고 있습니다.

나는 그것이 마치v-if그 안에 약간의 논리가 들어가 있을 겁니다예를 들어 설명하겠습니다.

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

권한을 확인하고 구성 요소를 표시하거나 숨깁니다.

현재는 CSS 스타일로 하고 있습니다.

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);
    }
}

하지만 이 요소가 문서에 남지 않았으면 합니다.그래서 CSS 말고 다른 방법을 찾고 있습니다. 왜냐하면 DOM에서도 삭제가 필요하기 때문입니다.v-if한다.

다음 해킹을 사용해 보십시오.

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 5-19-2017: 최신 코드입니다.나는 정의한다setAttribute()확인하다vnode.componentInstancehtml 요소 및 Vue 구성 요소와 함께 사용할 때 js 오류를 방지합니다.

언급URL : https://stackoverflow.com/questions/43003976/a-custom-directive-similar-to-v-if-in-vuejs