当前位置: 首页 > news >正文

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>

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


相关文章:

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

1&#xff0c;编写permission.ts文件 在src/utils/permission.ts import type { Directive } from "vue"; export const permission:Directive{// 在绑定元素的父组件被挂载后调用mounted(el,binding){// el&#xff1a;指令所绑定的元素&#xff0c;可以用来直接操…...

Nuxt3:当前页面滚动到指定位置

在Nuxt 3中&#xff0c;如果你想让当前页面跳转到指定位置&#xff0c;可以使用scrollIntoView方法。你需要给目标位置的元素添加一个ref引用&#xff0c;然后通过程序调用该ref来执行滚动。 以下是一个简单的例子&#xff1a; <template><div><!-- 其他内容 …...

word图题表题公式按照章节编号(不用题注)

预期效果&#xff1a; 其中3表示第三章&#xff0c;4表示第3章里的第4个图。标题、公式编号也是类似的。 为了达到这种按照章节编号的效果&#xff0c;原本可以用插入题注里的“包含章节编号” 但实际情况是&#xff0c;这不仅需要一级标题的序号是用“开始->多级列表”自动…...

最小生成树模型

文章目录 题单最小生成树模型1.[最短网络(prim)](https://www.acwing.com/problem/content/1142/)2. [局域网(kruskul)](https://www.acwing.com/problem/content/1143/)3. [繁忙的都市](https://www.acwing.com/problem/content/1144/)4. [ 联络员 ](https://www.acwing.com/p…...

基于盲信号处理的声音分离-基于改进的信息最大化的ICA算法

基于信息最大化的ICA算法的主要依据是使输入端与输出端的互信息达到最大&#xff0c;且输出各个分量之间的相关性最小化&#xff0c;即输出各个分量之间互信息量最小化&#xff0c;其算法的系统框图如图所示。 基于信息最大化的ICA算法的主要依据是使输入端与输出端的互信息达到…...

如何在Qt Designer中管理QSplitter

问题描述 当按下按钮时&#xff0c;我希望弹出一个对话框&#xff0c;用户可以在其中选择内容并最终按下 ‘Ok’ 按钮。我想在这个对话框中放置一个 QSplitter&#xff0c;左侧面板将显示树状结构&#xff0c;右侧将显示其他内容。如何正确实现这一点&#xff1f; 从 Qt 的示…...

关于新零售的一些思考

本文作为2024上半年大量输入之后的核心思考之一。工作到一定阶段之后&#xff0c;思考的重要性越来越高&#xff0c;后续会把自己的个人思考记录在这个新系列《施展爱思考》。背景是上半年面临业务转型从电商到新零售&#xff0c;本文是相关大量输入之后的思考&#xff0c;对新…...

C++初学者指南-2.输入和输出---从输入流错误中恢复

C初学者指南-2.输入和输出—从输入流错误中恢复 文章目录 C初学者指南-2.输入和输出---从输入流错误中恢复怎么了&#xff1f;解决方案&#xff1a;出错后重置输入流 怎么了&#xff1f; 示例&#xff1a;连续输入 int main () {cout << "i? ";int i 0;cin…...

毫秒级响应!清科优能应用 TDengine 建设虚拟电厂运营管理平台

小T导读&#xff1a;在清科优能的虚拟电厂运营管理平台建设中&#xff0c;项目初期预计涉及约一万台设备、总数据采集量达数十万&#xff0c;在数据库选择上&#xff0c;其希望能支持至少两千台设备的并发数据处理。本文介绍了清科优能的数据库选型经验以及最终应用效果&#x…...

【Ubuntu noble】apt 无法安装软件 Unable to locate package vim

宿主机以及 docker 无法定位软件包 将 /etc/apt/sources.list.d/ubuntu.sources 修改为以下内容&#xff08;主要是 Suites 字段增加了noble noble-updates&#xff09; Types: deb URIs: http://archive.ubuntu.com/ubuntu/ Suites: noble noble-updates noble-backports Com…...

Instagram APIj接口——快速获取Ins帖子媒体内容下载链接

一、引言 在社交媒体蓬勃发展的今天&#xff0c;Instagram已成为用户分享照片、视频和精彩瞬间的首选平台。然而&#xff0c;对于很多用户来说&#xff0c;想要保存或分享Instagram上的精彩内容却常常遇到困扰。为了解决这个问题&#xff0c;我们精心打造了一款全新的Instagra…...

Java基础(四)——字符串、StringBuffer、StringBuilder、StringJoiner

个人简介 &#x1f440;个人主页&#xff1a; 前端杂货铺 ⚡开源项目&#xff1a; rich-vue3 &#xff08;基于 Vue3 TS Pinia Element Plus Spring全家桶 MySQL&#xff09; &#x1f64b;‍♂️学习方向&#xff1a; 主攻前端方向&#xff0c;正逐渐往全干发展 &#x1…...

吐血推荐!3款视频生成工具,全部国产,都免费

AI视频大模型的爆发&#xff0c;让创作爆款视频不再是专业人士的能力。 今天二师兄给大家推荐3款免费的视频生成工具。 01 可灵 推荐指数 &#xff1a; 五颗星 先看效果 可灵大模型测试 可灵大模型是快手AI团队自主研发的视频生成大模型&#xff0c;具备强大的视频创作能力&a…...

【Web3】Web3.js 启动!并解决Web3 is not a constructor报错

苏泽 大家好 这里是苏泽 一个钟爱区块链技术的后端开发者 本篇专栏 ←持续记录本人自学智能合约学习笔记和经验总结 如果喜欢拜托三连支持~ 本节教大家如何启动Web3.js 目录 Web3 启动&#xff01; 于是很愉快的报错 创建实例&#xff01; 出来了 Web3&#xff1a;模块…...

算法训练营第六十七天 | 卡码网110 字符串接龙、卡码网105 有向图的完全可达性、卡码网106 岛屿的周长

卡码网110 字符串接龙 这题一开始用的邻接表dfs&#xff0c;不幸超时 #include <iostream> #include <list> #include <string> #include <vector> using namespace std;int minLen 501;bool count(string a, string b) {int num 0;for (int i 0; …...

搭建 MySQL MHA

搭建 MySQL MHA 搭建 MySQL MHA实验拓扑图实验环境实验思路MHA架构故障模拟 实验部署数据库安装主从复制部署时间同步主服务器配置从服务器配置创建链接 MHA搭建安装依赖的环境安装 node 组件安装 manager 组件配置无密码认证在 manager 节点上配置 MHA管理 mysql 节点服务器创…...

python中的线程与进程

一、线程与进程 在计算机科学中&#xff0c;理解线程和进程的区别是重要的基础知识。这些概念对于多任务操作和并发编程尤为关键。下面将详细介绍线程与进程的区别、特点和各自的使用场景。 1.1 进程&#xff08;Process&#xff09; 进程是操作系统分配资源的基本单位。每个进…...

网络安全筑基篇——反序列化漏洞

目录 序列化是什么&#xff1f; 反序列化又是什么&#xff1f; 反序列化漏洞的危害 代码样例 常见的魔术方法 修复方式有哪些&#xff1f; 常见的反序列化漏洞 Shiro反序列化漏洞 Fastjson反序列化漏洞 序列化是什么&#xff1f; 将实例化对象转换成字节流的过程 反序…...

帝国cms定时审核并更新的方法

比如你网站采集了成千上万篇文章&#xff0c;不可能一下子全部放出来的&#xff0c;所以为了模拟人工发布&#xff0c;那么就需要定时审核发布文章内容&#xff0c;本文内容核心解决了更加个性化的逼真模拟人工更新网站内容。 第一&#xff1a;首先要满足你的表中有未审核的数据…...

一个简单好用安全的开源交互审计系统,支持SSH,Telnet,Kubernetes协议

前言 在当今的企业网络环境中&#xff0c;远程访问和交互审计成为了保障网络安-全的重要组成部分。然而&#xff0c;现有的解-决方案往往存在一些痛点&#xff0c;如复杂的配置、有限的协议支持、以及审计功能的不足。这些问题不仅增加了IT管理员的负担&#xff0c;也为企业的…...

三步掌握Dark Reader:从入门到精通的护眼浏览解决方案

三步掌握Dark Reader&#xff1a;从入门到精通的护眼浏览解决方案 【免费下载链接】darkreader Dark Reader Chrome and Firefox extension 项目地址: https://gitcode.com/gh_mirrors/da/darkreader Dark Reader是一款能够为任何网站启用深色模式的浏览器扩展&#xff…...

从数据采集到模型部署:用Lerobot+本地数据集训练一个会抓积木的机械臂(避坑指南)

从数据采集到模型部署&#xff1a;用Lerobot本地数据集训练一个会抓积木的机械臂&#xff08;避坑指南&#xff09; 当机械臂第一次准确抓取乐高积木并放入指定盒子时&#xff0c;那种成就感远超单纯调通代码的快感。Lerobot框架的出现&#xff0c;让机器人学习从实验室走向个人…...

如何构建你的第一个Python高频交易模型:完整实战指南

如何构建你的第一个Python高频交易模型&#xff1a;完整实战指南 【免费下载链接】High-Frequency-Trading-Model-with-IB A high-frequency trading model using Interactive Brokers API with pairs and mean-reversion in Python 项目地址: https://gitcode.com/gh_mirror…...

微信小程序人脸核身接入全攻略:从资质准备到代码实现(附避坑指南)

微信小程序人脸核身接入实战&#xff1a;合规指南与代码精要 在金融、政务等高安全要求的场景中&#xff0c;确保用户身份真实性已成为刚需。微信小程序提供的人脸核身能力&#xff0c;将活体检测、OCR识别与权威数据比对融为一体&#xff0c;为开发者提供了合规且高效的身份验…...

BGE嵌入模型突破指南:解锁多模态检索增强的实战路径

BGE嵌入模型突破指南&#xff1a;解锁多模态检索增强的实战路径 【免费下载链接】FlagEmbedding Dense Retrieval and Retrieval-augmented LLMs 项目地址: https://gitcode.com/GitHub_Trending/fl/FlagEmbedding 在信息爆炸的时代&#xff0c;如何让机器精准理解人类语…...

5分钟快速上手!用VeriStand为你的Simulink模型搭建一个简易监控仪表盘

5分钟快速上手&#xff01;用VeriStand为Simulink模型搭建实时监控仪表盘 在工程仿真领域&#xff0c;能够直观观察模型运行状态并实时调整参数&#xff0c;是提升开发效率的关键。想象一下这样的场景&#xff1a;你刚完成一个BUCK电路的Simulink建模&#xff0c;通过仿真验证了…...

效率飙升:用快马平台一键生成项目模板,告别重复的vscode环境配置

作为一个经常需要在新设备上配置开发环境的前端开发者&#xff0c;我深刻体会到重复搭建项目的痛苦。每次换电脑或者开新项目&#xff0c;都要从头安装VSCode插件、配置构建工具、集成UI库……这些琐碎工作至少会浪费半小时。最近发现InsCode(快马)平台能完美解决这个问题&…...

英雄联盟智能助手:如何用League Toolkit提升你的游戏体验

英雄联盟智能助手&#xff1a;如何用League Toolkit提升你的游戏体验 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在英雄联盟的…...

谈谈你对springAop动态代理的理解?

面试 你要调用目标方法&#xff0c;不直接调用&#xff0c;而是交给代理对象&#xff0c;代理对象会先做额外功能&#xff0c;再调用原方法&#xff0c;最后再收尾。 至于叫动态代理的原因&#xff0c;是因为这个代理不是你手动写死的&#xff0c;而是程序在运行期间动态生成…...

避开这些坑!高德DragRoute插件获取路线坐标的5个常见问题解决方案

高德地图DragRoute插件实战&#xff1a;路线坐标获取的深度避坑指南 当开发者需要在地图上绘制复杂路线时&#xff0c;高德地图的DragRoute插件无疑是个强大工具。但在实际项目中&#xff0c;从简单的A到B路径绘制&#xff0c;到包含多个途经点的复杂路线坐标获取&#xff0c;开…...