自定义指令按钮权限

半夜删你代码·2024-04-17 14:18

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>