1、在src下新建文件夹directives,创建index.js,permission.js
index.js
import permission from './permission'
export default function (app) {
app.directive('permission', permission)
}
permission.js
import { useUserInfoStore } from '@/store/userInfoStore'
// 判断按钮是否有权限
export default {
mounted(el, binding) {
const { value } = binding;
if (value && value instanceof Array && value.length > 0) {
const userInfoStore = useUserInfoStore()
//在pinia中存储的权限列表
const modelList = userInfoStore.modelList
const hasPermission = modelList.some(role => value.includes(role.indexName));
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el);
}
} else {
throw new Error(`need roles! Like v-permission="['admin','editor']"`);
}
}
}
2、在main.js中引用
import App from './App.vue'
// 创建vue实例
const app = createApp(App)
// 自定义指令
import directive from '@/directives/index'
directive(app)
3、在组件中使用
<el-button v-permission="['project:create']" type="primary">创建</el-button>
<el-button v-permission="['project:list','project:detail']" type="primary">详情</el-button>
<el-button v-permission="['project:delete']" type="primary">删除</el-button>
注意事项:
(1)在el-dropdown的el-dropdown-item中使用,外面必须包裹一层div,示例如下
<el-dropdown>
<span class="el-dropdown-link">
更多
<el-icon class="el-icon--right"> <arrow-down /> </el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<div v-permission="['project:edit']">
<el-dropdown-item @click="openCreateMap(scope.row)">编辑</el-dropdown-item>
</div>
<div v-permission="['project:delete']">
<el-dropdown-item @click="openUpdatePanel(scope.row)">删除</el-dropdown-item>
</div>
</el-dropdown-menu>
</template>
</el-dropdown>