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配置后台路由实现菜单权限的