【vue3】通过【自定义指令】实现根据【权限】控制页面元素 【显示】【隐藏】【禁用】，并且有权限时点击自动【上报数据】

目录

需求：

方案：

code:

配置：

使用：

---

需求：

1. 有权限展示&可点击&点击上报数据；

2. 无权限展示&禁止点击

3. 无权限删除节点；

4. 有权限展示&点击不上报数据

方案：

通过自定义指令实现需求

code:

// 使用说明
// 控制权限：有权限可上报、无权限展示&禁止点击
// v-btnPermi="{permi: 'p_btn_xxx'}"
// 控制权限：有权限可上报、无权限删除节点
// v-btnPermi="{permi: 'p_btn_xxx', isHiden: true}"
// 控制权限：有权限展示&不上报数据、无权限删除节点
// v-btnPermi="{permi: 'p_btn_xxx', noReport: true, isHiden: true}"

export default {
  created(el, binding) {
    const { value } = binding
    if (!value.noReport) {
      // 用户有按钮权限：给按钮增加监听事件, 上报日志
      el.addEventListener('click', () => {
        // 点击按钮，上报日志
      })
    }
  },
  beforeMount(el, binding) {
    const { value } = binding
    let list = JSON.parse(localStorage.getItem('xxx')) // 获取缓存中的所有权限list
    let hasPermi = list && list.indexOf(value.permi) > -1 ? true : false
    // 无权限--禁用
    if (!hasPermi) {
      el.disabled = true
      el.style = "cursor: no-drop"
    }
    // 无权限--删除节点
    if (value.isHiden && !hasPermi) {
      el.style = "display: none"
    }
  }
}

配置：

在main.js中全局引入

import btnPermi from '@/directive/btnPermi.js'
instance.directive('btnPermi', btnPermi)

使用：

<el-button @click="xxx()" v-btnPermi="{permi: 'p_btn_xxx'}">监控大屏</el-button>