vue自定义指令（按钮权限）

最新推荐文章于 2023-10-18 15:15:44 发布

g_hy1994

最新推荐文章于 2023-10-18 15:15:44 发布

阅读量118

点赞数

分类专栏： VUE干货文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/g_hy1994/article/details/129237376

版权

VUE干货专栏收录该内容

4 篇文章 0 订阅

订阅专栏

// /directive/index.js
import permission from './permission';
// import colorfrom './color'

export default function (app) {
  app.directive('guohuayu', permission);
  // app.directive('color', color);
}

// main.js
import guohuayu from './directive/index';
const app = createApp(App);
guohuayu(app);

// /directive/permission.js
const checkPermission = (el, binding) => {
  // 获取自定义指令传过来的数组（binding.value）
  const btnRoles = binding.value;

  // sessionStorage.setItem(
  //   'huayu_btns',
  //   JSON.stringify(['401XZMB', '401SCXS', '401TJ']),
  // );

  const userRoles = JSON.parse(sessionStorage.getItem('huayu_btns'));
  // console.log('呵呵呵呵', el, binding.value, userRoles);

  if (btnRoles && btnRoles instanceof Array) {
    if (btnRoles.length) {
      const hasPermission = userRoles.some((v) => {
        return btnRoles.includes(v);
      });
      // console.log('是走这里啊啊啊', hasPermission);

      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      throw new Error(
        `传入关于权限的数组，如 v-permission="['super','normal']"`,
      );
    }
  }
};


export default {
  mounted(el, binding) {
    checkPermission(el, binding);
  },
  updated(el, binding) {
    checkPermission(el, binding);
  },
};