按钮权限实现-自定义指令

最新推荐文章于 2024-08-06 14:11:45 发布

小夏同学呀

最新推荐文章于 2024-08-06 14:11:45 发布

阅读量348

点赞数 2

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/web5219/article/details/136459527

版权

Vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

文章介绍了如何在Vue项目中创建并使用自定义指令isHasButton，该指令根据用户信息检查按钮权限，若无权限则从DOM中移除。全局注册后，只需在el-button上使用v-has指令即可应用权限控制。

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

自定义指令定义

v-show ：Vue 的内置指令，通过这个指令能展示和隐藏节点（Vue底层控制了该节点的 display 属性）

自定义指令：在构建项目过程中，虽然我们都是使用的组件形式，但是在某些情况下，我们仍然需要对普通DOM元素进行底层操作，这个时候就会用到自定义指令。
自定义指令既可以像 v-show 一样，不搭配属性值，也可以像 v-text配置属性值来实现特殊效果

1. 在自定义指令文件中编写以下代码
```javascript
//这里由于后台返回的button数组存放在仓库中，所以这里需要引入pinia
import pinia from "@/store";
import userstore from "@/store/modules/user.ts";
let UserStore = userstore(pinia);
export const isHasButton = (app: any) => {
  // 全局自定义指令，实现按钮权限
  app.directive("has", {
    // 代表使用这个全局自定义指令挂载完毕的时候会执行一次
    mounted(el: any, options: any) {
      //自定义指令右侧的数值：如果在用户信息buttons数组当中没有，直接从Dom树上干掉
      if (!UserStore.buttons.includes(options.value)) {
        // dom的原生方法
        el.parentNode.removeChild(el);
      }
    },
  });
};

首先在main.js中引用并使用所存放自定义指令的文件

/ 引入自定义指令
import { isHasButton } from "@/directive/has";
isHasButton(app);

最后在需要使用按钮权限的地方直接使用即可

//btn.Role.add 这是后台返回的按钮名称，由于在main.js中已经全局注册isHasButton ，所以可以直接使用
  <el-button
        type="primary"
        size="default"
        icon="Plus"
        @click="AddroleBtn"
        v-has="`btn.Role.add`"
        >添加角色</el-button
      >