前述

虽然VUE 定义了一些常用的指令，例如v-on、v-bind等，但是在我们实际开发的时候，还是会自己定义一些指令用于适应我们自己的业务。

实现

这里由于我的项目做了动态权限，页面的按钮也需要根据不同的权限来渲染，那么这里就需要我们这个权限指令了

// 文件名称：permission.js import Vue from 'vue' import store from '@/store' // 是否有权限 const hasPermission = requirePermission => { // 当前菜单需要的权限 let requirePermissionList = Array.isArray(requirePermission) ? requirePermission : [requirePermission] // 用户持有的权限 let userPermissionList = store.getters.permissions // 用户拥有所有的权限 * if (userPermissionList.includes("*")){ return true } // 判断用户是否持有菜单需要权限 return userPermissionList.some(e => requirePermissionList.includes(e)) } // 指令 Vue.directive('perm', { inserted: ((el, binding) => { if (!hasPermission(binding.value)) { el.parentNode.removeChild(el) } }) })

然后在main.js中导入这个文件

import '@/directives/premission'

最后在页面文件中使用这个指令

<a-space slot="action" slot-scope="text, record"> <a-button v-perm="['sys:dict:update']" icon="edit" @click="handleEdit(record)"/> <a-button v-perm="['sys:dict:delete']" icon="delete" @click="handleDelete(record)"/> </a-space>

注意： 这里我的用户持有的权限是在store中，通过getters导出，并且如果是所有权限‘*’，直接返回拥有该按钮权限