Vue.js에서 커스텀 조건부 렌더 디렉티브를 만듭니다.

Vue.js에서 커스텀 조건부 렌더 디렉티브를 만듭니다.

커스텀 Vue 조건부 디렉티브를 작성하는 방법을 찾고 있습니다.글로벌 메서드를 작성하고 v-if 내에서 호출할 수 있지만 코드를 명확하게 하기 위해 사용자 지정 지시문을 사용하고 싶습니다.

목적은 디렉티브로 요소를 꾸미고 GUID를 전달하는 것입니다(모두 사용자 권한에 따라 조건부 리다이너링을 처리하기 위한 것입니다). v-permission="'4ECE1FD4-4019-4CA2-AB9E-0A555CCBDB5B'"

지금 이 순간, 나는 단지 덧붙인다.display: none지시의 요소에 따라bindmethod와 이것은 내용을 숨기는 데는 문제가 없지만 요소를 렌더링하지 않는 것이 퍼포먼스에 도움이 됩니다.

어떻게 하면 이 일을 해낼 수 있을까요?

현재 지시 코드는 다음과 같습니다.

import Vue from 'vue'

Vue.directive('permission', {
  bind: function (el, binding, vnode) {
    if (binding.value) {
      let hasPermission = 
vnode.context.$store.getters.hasApiPermission(binding.value)
      if (!hasPermission) {
        el.style.display = 'none'
      }
    } else {
      console.error('You must specify a permission ID')
    }
  }
})

음, 그것은 다음을 사용하여 가능하다.inserted후크:

inserted: 바인딩된 요소가 부모 노드에 삽입되면 호출됩니다.

코드 캡처 예시:

Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    if (binding.value) {
      let hasPermission = 
vnode.context.$store.getters.hasApiPermission(binding.value)
      if (!hasPermission) {
        el.parentNode.removeChild(el)
      }
    } else {
      console.error('You must specify a permission ID')
    }
  }
})

단, 빌트인을 사용하는 것이 훨씬 더 좋습니다.v-if지시.Vue 2는 가상 DOM을 기반으로 하기 때문에 문이 반환되어도 렌더링되지 않습니다.false이 커스텀 디렉티브의 경우는, 우선 렌더링 되고 나서 삭제됩니다.

당신이 원하는 것을 이룰 수 있을지 모르겠어요.하지만 그게 정말 필요한지도 모르겠어.내 생각에 이런 건축은...

<tag v-if="getPerm('4ECE1FD4-4019-4CA2-AB9E-0A555CCBDB5B')">
  ...
</tag>

...이 정도면 충분히 선언적이야.

언급URL : https://stackoverflow.com/questions/47511243/create-a-custom-conditional-render-directive-in-vue-js