vue 权限按钮显示隐藏 (自定义指令法)

咱们做后台管理系统 肯定避免不了 权限菜单 权限按钮的显示与隐藏  我分享一下 我的实现:

import Vue from 'vue'Vue.directive('auth', {inserted: function (el, binding, vnode) {const authItem = binding.value.authItemconst authArr = [...new Set(binding.value.authArr)]if (Object.prototype.toString.call(authItem) === '[object Array]') {// 数组if (JSON.stringify(authItem.sort()) === JSON.stringify(authArr.sort())) {//存在不做操作} else {//不存在el.parentNode.removeChild(el)}} else {//字符串if (authArr.indexOf(authItem) < 0) {el.parentNode.removeChild(el)}}},
})

这里创建了一个 js 文件  具体逻辑如上

在 main.js 中引入

 使用

 这里传了两个参数 

authItem 是当前按钮的权限标记 可以传 字符串/数组 

authArr 是当前页的权限标记数组

 这里我是通过当前router获取的 你们也可以通过 vuex pinia 等状态管理工具 获取你们后台返回的路由数组中的meta 中的权限标记数组 具体根据项目而定 请自行修改

传的这两个参数 就是比较

authItem如果为字符串 authArr中存在这个字符串 就显示 

authItem如果为数组 authArr中的数组内容和authItem的数组内容 一样就显示

嗯....  我是这样做的 有大佬有更好的方法 欢迎评论 哈哈哈

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！