vue3+js+vite学习之自定义指令实现按钮权限

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>