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

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 中&#xff0c;字典&#xff08;dict&#xff09;是一种非常常用的数据结构&#xff0c;用于存储键值对。字典的查询操作是编程中常见的任务之一。在 Python 2.x 版本中&#xff0c;has_key() 方法被用来检查字典中是否存在某个键。然而&#xff0c;在 Pyt…...

IDEA通过tomcat运行注意事项

配置run--》edit configurations 以下的A B部分要保持一致 A和B的路径要保持一致...

Unity Hub 添加模块报错 Validation Failed 的解决办法

提供两种方法&#xff0c;请自行选择其中一种。 在C:\Windows\System32\drivers\etc\hosts中添加下面的内容并保存后&#xff0c;完全关闭Unity Hub并重新打开&#xff0c;再次尝试下载刚刚失败的模块。 127.0.0.1 public-cdn.cloud.unity3d.com 127.0.0.1 public-cdn.cloud.…...

软件功能测试的类型和流程分享

在现代社会&#xff0c;软件已经成为人们生活中不可或缺的一部分&#xff0c;而在软件的开发过程中&#xff0c;功能测试是不可或缺的环节。软件功能测试指的是对软件系统的功能进行检查和验证&#xff0c;以确保软件在各种情况下能够正常运行&#xff0c;并且能够按照用户需求…...

【C语言】atoi函数的使用及模拟实现

atoi (ascii to integer)&#xff0c;是把参数 str 所指向的字符串转换为一个整数&#xff08;int类型&#xff09;的库函数。 使用场景 引子&#xff1a; 有兴趣的朋友可以听我逐句翻译一下cpluscplus.com里的这段解释&#xff08;要考六级了练一下&#xff09;&#xff1a; …...

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…...

充电宝哪款好用?什么牌子充电宝耐用?充电宝选购要点总结

随着科技的飞速发展&#xff0c;充电宝已成为现代生活的必备之物。无论是日常通勤、旅行出差&#xff0c;还是在紧急情况下&#xff0c;充电宝都能为我们的电子设备提供可靠的电力支持。然而&#xff0c;面对市场上众多品牌和型号的充电宝&#xff0c;如何选择一款性价比高的充…...

【启程Golang之旅】基本变量与类型讲解

欢迎来到Golang的世界&#xff01;在当今快节奏的软件开发领域&#xff0c;选择一种高效、简洁的编程语言至关重要。而在这方面&#xff0c;Golang&#xff08;又称Go&#xff09;无疑是一个备受瞩目的选择。在本文中&#xff0c;带领您探索Golang的世界&#xff0c;一步步地了…...

使用docker部署项目

一、docker私有镜像仓库 1、docker私有镜像仓库 库&#xff08;Repository&#xff09;是集中存放镜像的地方&#xff0c;又分为公共镜像和私有仓库。 当我们执行docker pull xxx的时候&#xff0c;它实际上是从registry.docker.com这个地址去查找&#xff0c;这就是Docker公…...

智慧林业云巡平台 客户端和移动端(支持语音和视频)自动定位巡护,后端离线路线监测

目前现状 无法客观、方便地掌握护林员的到位情况&#xff0c;因而无法有效地保证巡护人员按计划要求&#xff0c;按时按周期对所负责的林区开展巡护&#xff0c;使巡护工作的质量得不到保证。遇到火情、乱砍滥伐等灾情时无法及时上报处理&#xff0c;现场状况、位置等信息描述…...

【最优化方法】实验三 无约束最优化方法的MATLAB实现

实验的目的和要求&#xff1a;通过本次实验使学生进一步熟悉掌握使用MATLAB软件&#xff0c;并能利用该软件进行无约束最优化方法的计算。 实验内容&#xff1a; &#xff11;、最速下降法的MATLAB实现 &#xff12;、牛顿法的MATLAB实现 &#xff13;、共轭梯度法的MATLAB…...

kafka-偏移量图解

生产者偏移量&#xff1a;生产者发送消息时写入到哪个位置&#xff08;主题的每个分区会存储一个 leo 即将写入消息的偏移量&#xff09;&#xff0c;每次写完消息 leo 会 1 消费者偏移量&#xff1a;消费者从哪个位置开始消费消息&#xff0c;小于等于 leo&#xff0c;每个组…...

内网安全--隧道技术-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、知识点 弱比较&#xff0c;强比较、数组绕过、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 阿呆得到最高指示&#xff0c;如果还出问题&#xff0c;就卷铺盖滚蛋&#xff0c;阿呆心在流血。 解法 注意到&#xff1a; <!-- flag in id 1000 -->拦截很多种字符&#xff0c;连 select 也不给用了。 if(preg_match("/\|\"|or|\||\-|\\\|\/|\\*|\…...

ABAP WRITE换行输出

不换行&#xff1a; write hello world!. write 春天马上就到了!. 换行&#xff1a; write hello world!. write /春天马上就到了!. 换行的第二种&#xff1a; write: hello world! ,/,春天马上就到了!....

VUE3学习第一篇:启动ruoyi

1、找到ruoyi的vue3版本 然后下载代码到本地&#xff0c; 我刚开始用的nodejs14报错&#xff0c; 后面换成nodejs16&#xff0c;启动前端成功了。 页面如下图所示...

pam_env.so模块配置解析

在PAM&#xff08;Pluggable Authentication Modules&#xff09;配置中&#xff0c; /etc/pam.d/su 文件相关配置含义如下&#xff1a; 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块&#xff0c;负责验证用户身份&am…...

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令&#xff0c;在Linux上安装软件&#xff0c;以及如何在Linux上部署一个单体项目&#xff0c;大多数同学都会有相同的感受&#xff0c;那就是麻烦。 核心体现在三点&#xff1a; 命令太多了&#xff0c;记不住 软件安装包名字复杂&…...

均衡后的SNRSINR

本文主要摘自参考文献中的前两篇&#xff0c;相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程&#xff0c;其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt​ 根发送天线&#xff0c; n r n_r nr​ 根接收天线的 MIMO 系…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

Web后端基础(基础知识)

BS架构&#xff1a;Browser/Server&#xff0c;浏览器/服务器架构模式。客户端只需要浏览器&#xff0c;应用程序的逻辑和数据都存储在服务端。 优点&#xff1a;维护方便缺点&#xff1a;体验一般 CS架构&#xff1a;Client/Server&#xff0c;客户端/服务器架构模式。需要单独…...

全面解析数据库:从基础概念到前沿应用​

在数字化时代&#xff0c;数据已成为企业和社会发展的核心资产&#xff0c;而数据库作为存储、管理和处理数据的关键工具&#xff0c;在各个领域发挥着举足轻重的作用。从电商平台的商品信息管理&#xff0c;到社交网络的用户数据存储&#xff0c;再到金融行业的交易记录处理&a…...

论文阅读:Matting by Generation

今天介绍一篇关于 matting 抠图的文章&#xff0c;抠图也算是计算机视觉里面非常经典的一个任务了。从早期的经典算法到如今的深度学习算法&#xff0c;已经有很多的工作和这个任务相关。这两年 diffusion 模型很火&#xff0c;大家又开始用 diffusion 模型做各种 CV 任务了&am…...