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

自定义指令定义

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);
      }
    },
  });
};
  1. 首先在main.js中引用并使用所存放自定义指令的文件
javascript 复制代码
/ 引入自定义指令
import { isHasButton } from "@/directive/has";
isHasButton(app);
  1. 最后在需要使用按钮权限的地方直接使用即可
javascript 复制代码
//btn.Role.add 这是后台返回的按钮名称,由于在main.js中已经全局注册isHasButton ,所以可以直接使用
  <el-button
        type="primary"
        size="default"
        icon="Plus"
        @click="AddroleBtn"
        v-has="`btn.Role.add`"
        >添加角色</el-button
      >
相关推荐
1undefined218 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
paopaokaka_luck40 分钟前
基于SpringBoot+Vue的非遗文化传承管理系统(websocket即时通讯、协同过滤算法、支付宝沙盒支付、可分享链接、功能量非常大)
java·数据库·vue.js·spring boot·后端·spring·小程序
用户3802258598241 小时前
vue3源码解析:依赖收集
前端·vue.js
wzyoung1 小时前
element-ui让el-form绑定的深层对象也能通过内置的resetFields方法重置
前端·javascript·vue.js
枣把儿3 小时前
Vercel 收购 NuxtLabs!Nuxt UI Pro 即将免费!
前端·vue.js·nuxt.js
paopaokaka_luck3 小时前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
一大树4 小时前
Vue3祖孙组件通信方法总结
前端·vue.js
coder_zhx4 小时前
Vue3自定义编程式弹窗
前端·vue.js
独立开阀者_FwtCoder4 小时前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者4 小时前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源