VUE3注册指令的方法
指令注册只能全局指令和选项式页面指令,composition api没有页面指令
选项式页面指令
<template><div class="home"><h3>自定义指令</h3><div class="from"><el-input type="text" v-focus v-model="name" /></div></div>
</template>
<script>export default {data() {return {name: ''}},directives: {focus: {mounted(el, binding, vnode) {// el代表DOM实例// binding获取到传入的参数及验证v-focus.a.b.c的修饰符,获取其中的a、b、c// vnode获取当前的虚拟DOMconsole.log('el', el, binding, vnode);console.log('el.style',el.style);el.style.border = '1px solid red'el.focus()}}}}
</script>
<style lang="scss" scoped>
.home{display: flex;// justify-content: center;flex-direction: column;align-items: center;
}
.from{width: 20%;
}
</style>
全局指令
// main.js
import {createApp} from 'vue'
import App from './App'
// 引入指令文件
import hasPermi from './directive/hasPermi'
const app = createApp(App)
// 注册指令
app.directive('hasPermi', hasPermi)
app.mount('#app')
模拟按钮权限
// /api/role.js
/*** todo: 模拟权限按钮*/
// 数据操作返回的接口返回值
export const roleUser = ['user:admin:update', 'user:admin:delete', 'user:admin:add', 'user:admin:search', 'user:admin:list'
]
// /directive/hasPermi
// 获取根据用户获取用户按钮权限
import { roleUser } from '@/api/role';
// 按钮权限
export default {mounted(el, binding, vnode) {const { value } = bindingconst all_permission = "*:*:*";// 后端返回的角色按钮权限const permissions = roleUserif (value && value instanceof Array && value.length > 0) {// 前端定义的const permissionFlag = valueconst hasPermissions = permissions.some(permission => {return all_permission === permission || permissionFlag.includes(permission)})console.log('hasPermissions', hasPermissions);if (!hasPermissions) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(`请设置操作权限标签值`)}}
}
页面使用
<template><div class="home"><div :style="{color: nowColor }">当前颜色:{{ nowColor }}</div><div class="event"><el-button class="bg-lime-500" type="success" @click="alterColor">改变颜色</el-button></div><hr /><div class="directives"><h2>自定义显示按钮</h2><!-- 该用户没权限,所以不显示 --><el-button v-hasPermi="['user:admin:detail']">详情</el-button></div></div>
</template>
相关文章:
VUE3注册指令的方法
指令注册只能全局指令和选项式页面指令,composition api没有页面指令 选项式页面指令 <template><div class"home"><h3>自定义指令</h3><div class"from"><el-input type"text" v-focus v-model"name&q…...
【Python】 Python 字典查询:‘has_key()‘ 方法与 ‘in‘ 关键字的比较
基本原理 在 Python 中,字典(dict)是一种非常常用的数据结构,用于存储键值对。字典的查询操作是编程中常见的任务之一。在 Python 2.x 版本中,has_key() 方法被用来检查字典中是否存在某个键。然而,在 Pyt…...
IDEA通过tomcat运行注意事项
配置run--》edit configurations 以下的A B部分要保持一致 A和B的路径要保持一致...
Unity Hub 添加模块报错 Validation Failed 的解决办法
提供两种方法,请自行选择其中一种。 在C:\Windows\System32\drivers\etc\hosts中添加下面的内容并保存后,完全关闭Unity Hub并重新打开,再次尝试下载刚刚失败的模块。 127.0.0.1 public-cdn.cloud.unity3d.com 127.0.0.1 public-cdn.cloud.…...
软件功能测试的类型和流程分享
在现代社会,软件已经成为人们生活中不可或缺的一部分,而在软件的开发过程中,功能测试是不可或缺的环节。软件功能测试指的是对软件系统的功能进行检查和验证,以确保软件在各种情况下能够正常运行,并且能够按照用户需求…...
【C语言】atoi函数的使用及模拟实现
atoi (ascii to integer),是把参数 str 所指向的字符串转换为一个整数(int类型)的库函数。 使用场景 引子: 有兴趣的朋友可以听我逐句翻译一下cpluscplus.com里的这段解释(要考六级了练一下): …...
Golang:使用bndr/gotabulate实现美观的打印表格数据
bndr/gotabulate 可以使用 Go 语言简单、美观的打印表格数据 文档 https://pkg.go.dev/github.com/bndr/gotabulatehttps://github.com/bndr/gotabulate 安装 go get github.com/bndr/gotabulate代码示例 package mainimport ("fmt""github.com/bndr/gotab…...
充电宝哪款好用?什么牌子充电宝耐用?充电宝选购要点总结
随着科技的飞速发展,充电宝已成为现代生活的必备之物。无论是日常通勤、旅行出差,还是在紧急情况下,充电宝都能为我们的电子设备提供可靠的电力支持。然而,面对市场上众多品牌和型号的充电宝,如何选择一款性价比高的充…...
【启程Golang之旅】基本变量与类型讲解
欢迎来到Golang的世界!在当今快节奏的软件开发领域,选择一种高效、简洁的编程语言至关重要。而在这方面,Golang(又称Go)无疑是一个备受瞩目的选择。在本文中,带领您探索Golang的世界,一步步地了…...
使用docker部署项目
一、docker私有镜像仓库 1、docker私有镜像仓库 库(Repository)是集中存放镜像的地方,又分为公共镜像和私有仓库。 当我们执行docker pull xxx的时候,它实际上是从registry.docker.com这个地址去查找,这就是Docker公…...
智慧林业云巡平台 客户端和移动端(支持语音和视频)自动定位巡护,后端离线路线监测
目前现状 无法客观、方便地掌握护林员的到位情况,因而无法有效地保证巡护人员按计划要求,按时按周期对所负责的林区开展巡护,使巡护工作的质量得不到保证。遇到火情、乱砍滥伐等灾情时无法及时上报处理,现场状况、位置等信息描述…...
【最优化方法】实验三 无约束最优化方法的MATLAB实现
实验的目的和要求:通过本次实验使学生进一步熟悉掌握使用MATLAB软件,并能利用该软件进行无约束最优化方法的计算。 实验内容: 1、最速下降法的MATLAB实现 2、牛顿法的MATLAB实现 3、共轭梯度法的MATLAB…...
kafka-偏移量图解
生产者偏移量:生产者发送消息时写入到哪个位置(主题的每个分区会存储一个 leo 即将写入消息的偏移量),每次写完消息 leo 会 1 消费者偏移量:消费者从哪个位置开始消费消息,小于等于 leo,每个组…...
内网安全--隧道技术-MSF上线本地
免责声明:本文仅做技术交流与学习... 不得不说,小白最近也是用上了viper,这里要特别感谢一下my bro 北岭敲键盘的荒漠猫 MSF--viper: --生成马子-->上线 --进入meterpreter. 1-查看路由,添加路由. 查看路由信息 : run autoroute -p run post/multi/manage/autoroute 添加…...
初识STM32单片机-TIM定时器
初识STM32单片机-TIM定时器 一、定时器概述二、定时器类型2.1 基本定时器(TIM6和TIM7)2.2 通用定时器(TIM2、TIM3、TIM4和TIM5)2.3 高级定时器(TIM1和TIM8) 三、定时中断基本结构和时基单元工作时序3.1 定时器基本结构3.2 预分频器时序3.3 计数器时序3.3.1 计数器有无预装时序(…...
NSSCTF-Web题目3
目录 [BJDCTF 2020]easy_md5 1、知识点 2、题目 3、思路 [ZJCTF 2019]NiZhuanSiWei 1、知识点 2、题目 3、思路 第一层 第二层 第三层 [BJDCTF 2020]easy_md5 1、知识点 弱比较,强比较、数组绕过、MD5加密 2、题目 3、思路 1、首先我们跟着题目输入&a…...
基于Java实现震中附近风景区预警可视化分析实践
目录 前言 一、空间数据说明 1、表结构信息展示 2、空间范围查询 二、Java后台开发实现 1、模型层设计与实现 2、控制层设计与实现 三、Leaflet地图开发 1、地震震中位置展示 2、百公里风景区列表展示 3、风景区列表展示 4、附近风景区展示 四、总结 前言 地震这类…...
【CTF Web】CTFShow web7 Writeup(SQL注入+PHP+进制转换)
web7 1 阿呆得到最高指示,如果还出问题,就卷铺盖滚蛋,阿呆心在流血。 解法 注意到: <!-- flag in id 1000 -->拦截很多种字符,连 select 也不给用了。 if(preg_match("/\|\"|or|\||\-|\\\|\/|\\*|\…...
ABAP WRITE换行输出
不换行: write hello world!. write 春天马上就到了!. 换行: write hello world!. write /春天马上就到了!. 换行的第二种: write: hello world! ,/,春天马上就到了!....
VUE3学习第一篇:启动ruoyi
1、找到ruoyi的vue3版本 然后下载代码到本地, 我刚开始用的nodejs14报错, 后面换成nodejs16,启动前端成功了。 页面如下图所示...
3.3.1_1 检错编码(奇偶校验码)
从这节课开始,我们会探讨数据链路层的差错控制功能,差错控制功能的主要目标是要发现并且解决一个帧内部的位错误,我们需要使用特殊的编码技术去发现帧内部的位错误,当我们发现位错误之后,通常来说有两种解决方案。第一…...
从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路
进入2025年以来,尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断,但全球市场热度依然高涨,入局者持续增加。 以国内市场为例,天眼查专业版数据显示,截至5月底,我国现存在业、存续状态的机器人相关企…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
【项目实战】通过多模态+LangGraph实现PPT生成助手
PPT自动生成系统 基于LangGraph的PPT自动生成系统,可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析:自动解析Markdown文档结构PPT模板分析:分析PPT模板的布局和风格智能布局决策:匹配内容与合适的PPT布局自动…...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
基于 TAPD 进行项目管理
起因 自己写了个小工具,仓库用的Github。之前在用markdown进行需求管理,现在随着功能的增加,感觉有点难以管理了,所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD,需要提供一个企业名新建一个项目&#…...
面向无人机海岸带生态系统监测的语义分割基准数据集
描述:海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而,目前该领域仍面临一个挑战,即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...
Unity UGUI Button事件流程
场景结构 测试代码 public class TestBtn : MonoBehaviour {void Start(){var btn GetComponent<Button>();btn.onClick.AddListener(OnClick);}private void OnClick(){Debug.Log("666");}}当添加事件时 // 实例化一个ButtonClickedEvent的事件 [Formerl…...
Web后端基础(基础知识)
BS架构:Browser/Server,浏览器/服务器架构模式。客户端只需要浏览器,应用程序的逻辑和数据都存储在服务端。 优点:维护方便缺点:体验一般 CS架构:Client/Server,客户端/服务器架构模式。需要单独…...
