vue3用自定义指令实现按钮权限

1,编写permission.ts文件

在src/utils/permission.ts

import type { Directive } from "vue";
export const permission:Directive={// 在绑定元素的父组件被挂载后调用mounted(el,binding){// el:指令所绑定的元素,可以用来直接操作 DOM// binding:我们通过自定义指令传递的各种参数const {value}=binding;// 这里模拟后端返回来的数据,一般是登录过后存在缓存或者pinia里const permissionButton = ['add', 'edit']if (value && value instanceof Array && value.length > 0) {// 有权限const hasPermission = permissionButton.some((role: string) => {console.log('role',role);return value.includes(role);}); // 没有权限if (!hasPermission) {el.style.display = 'none';}}}
}

2,在main.ts注册

import { createApp, type Directive } from 'vue'
import pinia from './stores'
import App from './App.vue'
import router from './router'// 导入自定义指令
import * as directives from '@/utils/permission'const app = createApp(App)
app.use(pinia)
app.use(router)
app.mount('#app')//挂载自定义指令
Object.keys(directives).forEach(key => {app.directive(key, (directives as { [key: string]: Directive })[key]);});

3,在任意vue文件里使用

<template><div ><button v-permission="['add']">增加</button ><button v-permission="['delete']">删除</button ><button v-permission="['edit']">修改</button ><button v-permission="['query']">查看</button ><button v-permission="['export']">导出</button ></div>
</template>

效果图:
在这里插入图片描述


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/862145.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

备战秋招day6

算法 232. 用栈实现队列 class MyQueue {Stack<Integer> in;Stack<Integer> out;//构造器public MyQueue() {in new Stack<>();out new Stack<>();}//入队到末尾public void push(int x) {in.push(x);}//出队public int pop() {//先进先出//in的元…

大模型推理知识总结

一、大模型推理概念 大多数流行的only-decode LLM&#xff08;例如 GPT-3&#xff09;都是针对因果建模目标进行预训练的&#xff0c;本质上是作为下一个词预测器。这些 LLM 将一系列tokens作为输入&#xff0c;并自回归生成后续tokens&#xff0c;直到满足停止条件&#xff0…

【PL理论深化】(8) Ocaml 语言:元组和列表 | 访问元组中的元素 | 列表中的 head 和 tail | 基本列表操作符

&#x1f4ac; 写在前面&#xff1a;本章我们将探讨 OCaml 中的元组&#xff08;tuple&#xff09;和列表&#xff08;list&#xff09;&#xff0c;它们是函数式编程语言中最常用的数据结构。 目录 0x00 元组&#xff08;Tuple&#xff09; 0x01 访问元组中的元素 0x02 列表&…

IP中转是什么?IP中转会导致网速下降吗

在互联网通信中&#xff0c;IP中转是一个重要的概念&#xff0c;它涉及到数据包的路由和转发。但很多人对于IP中转及其对网络速度的影响并不十分了解。本文将详细解释IP中转的含义&#xff0c;并探讨它是否会导致网速下降。 IP中转是什么&#xff1f; IP中转&#xff0c;也称…

8.作用域与函数

1.局部变量与全局变量: 局部:在函数体或局部范围内声明的变量称为局部变量,仅在局部作用域内有效. 全局:在函数之外或全局范围内声明的变量,允许在函数内部和外部访问.不允许在函数内部修改. 2.global:用于在函数内部访问和修改全局作用域中的变量,通过在函数内部使用global关键…

沉淀强化镍基合金660大螺丝的物理性能

沉淀强化镍基合金660大螺丝&#xff0c;是一种高性能的工程材料&#xff0c;其在极端环境中展现了优异的稳定性和耐用性。以下&#xff0c;我们将深入解析其主要的物理性能。 首先&#xff0c;该合金螺丝的密度为7.99g/cm&#xff0c;这意味着它具有较高的质量密度&#xff0c;…

MethodArgumentNotValidException

MethodArgumentNotValidException 是 Spring 框架中用于处理方法参数验证失败时抛出的异常。通常在使用 Spring MVC 或 Spring Boot 时&#xff0c;当请求体中的数据未通过验证注解&#xff08;如 NotNull, Size, Min, Max 等&#xff09;的检查时&#xff0c;会抛出此异常。 …

lodash _.template()方法的使用

背景&#xff1a; 使用_.template()生成对应数据的对应html代码 核心代码&#xff1a; //定义一个变量来装finalHtml var finalHtml //1.模版 compiled _.template([<span class"${clazz}" index"${index}" style"bac…

APM Profile 在系统可观测体系中的应用

引言 应用程序性能分析&#xff08;Application Performance Management&#xff0c;APM&#xff09;是一个广泛的概念&#xff0c;涉及应用程序运行时各种性能指标的监测、诊断和优化。在可观测体系建设中&#xff0c;APM 是保障系统业务运行性能的关键技术&#xff0c;确保用…

Tomcat WEB站点部署

目录 1、使用war包部署web站点 2、自定义默认网站目录 3、部署开源站点&#xff08;jspgou商城&#xff09; 对主机192.168.226.22操作 对主机192.168.226.20操作 上线的代码有两种方式&#xff1a; 第一种方式是直接将程序目录放在webapps目录下面&#xff0c;这种方式…

多协议网关BL110钡铼6路RS485转MQTT协议云网关

在工业自动化的现代化进程中&#xff0c;物联网技术的应用日益广泛&#xff0c;特别是工业物联网网关作为连接传感器、控制器和云端平台的关键枢纽&#xff0c;发挥着至关重要的作用。BL110钡铼多协议网关作为一款专为工业环境设计的先进设备&#xff0c;不仅支持多种下行采集协…

【Vue.js】 Mixin 局部混入与全局混入的介绍和使用总结以及优缺点分析

1. Vue.js Mixin 概述 1.1 Mixin 的定义与作用 Mixin 在 Vue.js 中是一种灵活的组件复用机制。它允许我们将多个组件之间的共通功能抽象出来&#xff0c;形成一个混入对象。这样&#xff0c;我们就可以避免在多个组件中重复编写相同的代码&#xff0c;提高代码的复用性和可维…

【代码随想录】【算法训练营】【第51天】 [115]不同的子序列 [583]两个字符串的删除操作 [72]编辑距离

前言 思路及算法思维&#xff0c;指路 代码随想录。 题目来自 LeetCode。 day 51&#xff0c;周四&#xff0c;又是不能坚持的一天~ 题目详情 [115] 不同的子序列 题目描述 115 不同的子序列 解题思路 前提&#xff1a; 思路&#xff1a; 重点&#xff1a; 代码实现 …

【chatgpt】利用遗传编程(GP)生成编译原理代码

利用遗传编程&#xff08;GP&#xff09;生成编译原理代码是一种自动化编程技术&#xff0c;通过进化算法寻找解决特定问题的最优代码。以下是如何利用GP生成编译原理代码的示例步骤&#xff1a; 1. 定义问题 确定需要解决的编译原理问题&#xff0c;如词法分析器、语法分析器…

windows下修改Jar包内容的两种方式

windows下修改Jar包内容的两种方式 背景第一种&#xff1a;解压工具第二种&#xff1a;Jar命令附Jar命令用法基本用法常见选项示例1&#xff1a;创建一个简单的 JAR 文件示例2&#xff1a;创建包含清单文件的 JAR 文件示例3&#xff1a;列出 JAR 文件的内容示例4&#xff1a;提…

数据库物理结构设计-定义数据库模式结构(概念模式、用户外模式、内模式)、定义数据库、物理结构设计策略

一、引言 如何基于具体的DBMS产品&#xff0c;为数据库逻辑结构设计的结果&#xff0c;即关系数据库模式&#xff0c;制定适合应用要求的物理结构 1、在设计数据库物理结构前&#xff0c;数据库设计人员首先 要充分了解所用的DBMS产品的功能、性能和特点&#xff0c;包括提供…

【Unity】数据持久化--PlayerPrefs

1、PlayerPrefs是什么 是unity提供的可以用于存储读取玩家数据的公共类 2、存储相关 2.1 PlayerPrefs的数据存储类似于键值对存储一个键对应一个值 提供了存储3种数据的方法int float string 键: string类型 值: int float string对应3种API PlayerPrefs.SetInt("myAge…

慧科新闻搜索研究数据库的使用指南及个人获取途径

《慧科新闻搜索研究数据库》WiseSearch由慧科讯业有限公司出品。WiseSearch是具有新闻搜索/浏览、对比分析等功能的一站式新闻搜索平台&#xff1b;内容包括1200种报刊和8000 网站的新闻资讯&#xff0c;平面媒体涵盖全国综合大报、党委机关报、都市报、行业报刊媒体&#xff0…

算法08 广/宽度优先搜索及相关问题详解

这是《C算法宝典》算法篇的第08节文章啦~ 如果你之前没有太多C基础&#xff0c;请点击&#x1f449;专栏&#xff1a;C语法入门&#xff0c;如果你C语法基础已经炉火纯青&#xff0c;则可以进阶算法&#x1f449;专栏&#xff1a;算法知识和数据结构&#x1f449;专栏&#xff…

数据结构与算法高频面试题

初级面试题及详细解答 当涉及到数据结构与算法的初级面试题时&#xff0c;通常涉及基本的数据结构操作、算法复杂度分析和基本算法的应用。 1. 什么是数组&#xff1f;数组和链表有什么区别&#xff1f; 解答&#xff1a; 数组&#xff1a;是一种线性数据结构&#xff0c;用…