自定义指令控制按钮级别权限

最新推荐文章于 2024-10-07 09:24:46 发布

@ZhaoYunyao

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量106

点赞数

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_44177413/article/details/134220643

版权

文章介绍了如何在Element-UI中使用自定义指令(v-modulePermission)控制按钮的点击事件，同时强调了解除事件绑定以避免内存泄露。通过示例展示了如何根据模块状态禁用或警告用户操作。

摘要由CSDN通过智能技术生成

import { Message } from "element-ui";
const interceptFn = () => {
  Message.warning("请联系管理员进行续费");
};
const fn = (click, type) => {
  const enableModuleInfos = JSON.parse(
    localStorage.getItem("enableModuleInfos")
  );
  const status =
    enableModuleInfos.find((e) => e.moduleId === type)?.status === 0
      ? true
      : false;
  if (status) {
    return click;
  } else {
    return interceptFn;
  }
};
// 使用方法<el-button type="text" :disabled="data.status == 1" v-modulePermission="{type:2,click:()=>operation('编辑', data)}">编辑</el-button>
// 不需要传参的话就不用箭头函数 v-modulePermission="{type:2,click:operation}"
export default {
  //   type 1数据管理 2智慧工单 3智慧库存
  bind(el, binding, vnode, oldVnode) {
    const { value } = binding;
    const { click, type } = value;
    el.addEventListener("click", fn(click, type));
  },
  unbind(el, binding, vnode, oldVnode) {
    const { value } = binding;
    const { click, type } = value;
    // 解绑事件
    el.removeEventListener("click", fn(click, type));
  },
};

思路是通过自定义指令来绑定点击事件，绑定事件后一定要解绑事件不然会内存泄露