权限控制-按钮

1.权限相关信息

通常来说，相关的权限信息都是从接口数据中拿到的【权限管理】，这里进行简单的模拟，我们在 Vuex 中 定义 buttonPermission 这个对象，里面存放着 按钮 应该具有的权限（权限不同按钮显示的也不同）

/store/index.js 中内容为

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 给指定用户 定义 button 的相关显示信息
    // 用户权限  可添加  不可编辑，删除
    buttonPermission: {
      add: true,
      edit: true,
      delete: false,
    },
  },
});

2.定义按钮

<template>
  <div id="app">
    <button>添加</button>
    <button>编辑</button>
    <button>删除</button>
  </div>
</template>

3.自定义指令

我们新建文件夹 /directives/has.js 用来存储 自定义指令。

export default {
  inserted(el, binding, vnode) {
    console.log(el, binding, vnode);

  },
};

【关于(el,binding,vnode)相关参数的说明 请参考 这里】

4.引入自定义指令，并给按钮使用上

【这里自定义传递的参数 可以在参数 binding 中获得(即使用 binding.value)】

<template>
  <div id="app">
    <button v-has="'add'">添加</button>
    <button v-has="'edit'">编辑</button>
    <button v-has="'delete'">删除</button>
  </div>
</template>

<script>
import has from "@/directives/has.js";
export default {
  directives: {
    has,
  },
};
</script>

5.完善自定义指令 has.js

定义变量 btnPermissionValue 用来接收 按钮传递过来的值，boolean 拿到的是Vuex中buttonPermission所指定项按钮的布尔状态。如果为 false 则进行节点元素的删除。

export default {
  inserted(el, binding, vnode) {
    console.log(el, binding, vnode);
    // 拿到所绑定的 值 v-has 所绑定的值
    let btnPermissionValue = binding.value;
    let boolean =
      vnode.context.$store.state.buttonPermission[btnPermissionValue];

    !boolean && el.remove();
  },
};

6.动态展示