自定义指令按钮权限

1、指令文件

javascript 复制代码
// 判断按钮权限逻辑
const checkPermission = (el, binding) => {
  // 获取自定义指令传过来的数组(binding.value)
  const btnRoles = binding.value
  console.log(btnRoles)
  // 取一下本地存的账号权限
  // const userRoles = JSON.parse(localStorage.getItem('role'))
  const userRoles = ['super', 'normal']
  // 判断自定义指令的传值,在账号权限数组中能否找到
  if (btnRoles) {
    // 能找到返回true
    const hasPermission = userRoles.some((v) => {
      return btnRoles.includes(v)
    })
    // 找不到返回false,使用自定义指令的钩子函数,操作dom元素删除该节点
    if (!hasPermission) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  } else {
    throw new Error(`传入关于权限的数组,如 v-permission="['super','normal']"`)
  }
}

// 导出一个对象用作自定义指令的第二个参数
export default checkPermission

2、main.js文件引入,挂载在vue实例上

javascript 复制代码
import checkPermission from './plugins/directive/permission'
const app = createApp({})
app.directive('permission', checkPermission)
app.mount('#app')

3、页面使用

html 复制代码
    <Button v-permission="'super'">super</Button>
    <Button v-permission="'normal'">normal</Button>
    <Button v-permission="'other'">other</Button>
相关推荐
大筒木老辈子1 小时前
Linux笔记---协议定制与序列化/反序列化
网络·笔记
草莓熊Lotso1 小时前
【C++】递归与迭代:两种编程范式的对比与实践
c语言·开发语言·c++·经验分享·笔记·其他
我爱挣钱我也要早睡!4 小时前
Java 复习笔记
java·开发语言·笔记
汇能感知9 小时前
摄像头模块在运动相机中的特殊应用
经验分享·笔记·科技
阿巴Jun9 小时前
【数学】线性代数知识点总结
笔记·线性代数·矩阵
茯苓gao9 小时前
STM32G4 速度环开环,电流环闭环 IF模式建模
笔记·stm32·单片机·嵌入式硬件·学习
是誰萆微了承諾10 小时前
【golang学习笔记 gin 】1.2 redis 的使用
笔记·学习·golang
DKPT10 小时前
Java内存区域与内存溢出
java·开发语言·jvm·笔记·学习
ST.J10 小时前
前端笔记2025
前端·javascript·css·vue.js·笔记
Suckerbin11 小时前
LAMPSecurity: CTF5靶场渗透
笔记·安全·web安全·网络安全