自定義指令類似於v-如果在vuejs

Question

我正在寫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。

Answer 1

嘗試使用這個技巧：

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 2017年5月19日：我最新的代碼。我定義了setAttribute()並檢查了vnode.componentInstance以防止在使用html元素和Vue組件時出現js錯誤。