// 路由对象
{
path: 'button-permission',
component: () => import('@/views/NestedExample/PageButtonPermission'),
name: 'PageButtonPermission',
meta: { title: '按钮权限', icon: '按钮权限', buttonPermission: [
{ id: 'search', name: '搜索', permission: true },
{ id: 'add', name: '添加', permission: false },
{ id: 'del', name: '删除', permission: true }
] }
}
<!-- 通过自定义指令决定按钮是否显示 -->
<el-button v-button-permission:search type="primary">搜索</el-button>
<el-button v-button-permission:add type="primary">添加</el-button>
<el-button v-button-permission:del type="primary">删除</el-button>
// 自定义指令
Vue.directive('button-permission', {
bind: (el, { arg }, { context: { $route: { meta }}}) => {
if (meta.buttonPermission && arg && meta.buttonPermission.find(e => e.id === arg)) {
if (!meta.buttonPermission.find(e => e.id === arg).permission) {
el.style.display = 'none'
Vue.nextTick(() => el.remove())
}
}
}
})