自定义指令按钮权限

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>
相关推荐
使一颗心免于哀伤9 小时前
《设计模式之禅》笔记摘录 - 21.状态模式
笔记·设计模式
_落纸2 天前
三大基础无源电子元件——电阻(R)、电感(L)、电容(C)
笔记
Alice-YUE2 天前
【CSS学习笔记3】css特性
前端·css·笔记·html
2303_Alpha2 天前
SpringBoot
笔记·学习
Hello_Embed3 天前
STM32HAL 快速入门(二十):UART 中断改进 —— 环形缓冲区解决数据丢失
笔记·stm32·单片机·学习·嵌入式软件
咸甜适中3 天前
rust语言 (1.88) 学习笔记:客户端和服务器端同在一个项目中
笔记·学习·rust
Grassto3 天前
RAG 从入门到放弃?丐版 demo 实战笔记(go+python)
笔记
Magnetic_h3 天前
【iOS】设计模式复习
笔记·学习·ios·设计模式·objective-c·cocoa
周周记笔记3 天前
学习笔记:第一个Python程序
笔记·学习
丑小鸭是白天鹅3 天前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin