Vue筆記--經過自定義指令實現按鈕操做權限

常常作中後臺系統，此類系統的權限是比較重要，拿本身作過的一些項目作個筆記。

Vue實現的中後臺管理系統。按鈕操做權限的空置通常都是經過自定義指令Vue.directive。

<el-button v-has="fq-pms" type="primary">按鈕</el-button>

一般咱們會把從後臺請求過來的數據存貯到Vuex或localStorage，接下來咱們先註冊一個全局自定義指令並監控它

Vue.directive('has',{
  bind:function(el,binding){
    const permissons = ['lcj'] //指令列表
　　 if (has(binding.value, permissions)) {
         el.parentNode.removeChild(el);//調用元素父級刪除，有時間父元素爲渲染出來能夠把bind換成inserted
    }
  }
})

has函數

function has(value, permissions) {
  let isExist = true;
  if (permissions === undefined||permissions===null || permissions.length === 0) {
    return true;
  }
  for (let i = 0; i < permissions.length; i++) {
    if (permissions[i] === value) {
      isExist = false;
      break;
    }
  }
  return isExist;
}

 

bind是Vue.directive的五個生命週期(鉤子函數)，按照生命週期 bind>inserted>update>componentUpdate>unbind

1. bind:只調用一次，指令第一次綁定到元素時調用。在這裏能夠進行一次性的初始化設置
2. inserted:被綁定元素插入父節點時調用 (僅保證父節點存在，但不必定已被插入文檔中)
3. update:所在組件的 VNode 更新時調用，可是可能發生在其子 VNode 更新以前。指令的值可能發生了改變，也可能沒有。可是你能夠經過比較更新先後的值來忽略沒必要要的模板更新
4. componentUpdate:指令所在組件的 VNode 及其子 VNode 所有更新後調用
5. unbind:只調用一次，指令與元素解綁時調用　　

 通常是經過操做權限是經過按鈕的，菜單權限是經過前端路由和後臺路由來判斷的。下章會介紹Vue-router配置後臺路由實現菜單權限的