方法一:指令.js
// 注册一个全局自定义指令 `v-has-permission` Vue.directive('has-permission', { bind(el, binding, vnode) { // 获取绑定的权限值 const permission = binding.value; // 检查用户是否拥有该权限 const hasPermission = checkUserPermission(permission); // 假设这是一个检查权限的函数 if (!hasPermission) { // 如果用户没有权限,移除DOM元素 el.parentNode && el.parentNode.removeChild(el); } } }); // 检查权限的示例函数 function checkUserPermission(permission) { // 这里应该是逻辑来判断用户是否拥有权限 // 假设当前用户拥有权限,返回 true return true; }
使用
<template> <button v-has-permission="'edit'">编辑</button> </template>
方法二:声名permission.js
import store from '@/store' const directive = {} directive.install = Vue => { Vue.directive('has',{ bind:function(el,binding,vnode){ // 解构store中存储的permission数据 let { user = {} } = store.state let {permissions = []} = user console.log('permissions',permissions); // 判断permission数组中是否包含binding.value的值 // console.log(permissions.includes('sys:log:delete')); console.log(permissions.includes(binding.value)); // permission数组中包含binding.value的值时,显示按钮;否则隐藏 permissions.includes(binding.value)?el.style.display='true':el.style.display='none' } }) } export default directive
在全局文件main.js中引入
// 导入按钮权限自定义指令 import directive from '@/directives/permission' Vue.use(directive)
在页面中引用自定义指令‘has’
// permission数组中不包含'sys:user:add2',故该按钮隐藏 <el-button v-has="'sys:user:add2'" type="primary">权限2</el-button> // permission数组中包含'sys:user:add',故该按钮显示 <el-button v-has="'sys:user:add'" type="primary">权限1</el-button>
标签:el,vue,directive,permission,binding,按钮,权限,permissions From: https://www.cnblogs.com/fly-s/p/18383740