vue按钮权限自定义指令

// 路由对象
{
    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())
      }
    }
  }
})