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>

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

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

相关文章

“壕无人性”的沙特也要买量子计算机!巨头沙特阿美的合作方竟是它?

内容来源&#xff1a;量子前哨&#xff08;ID&#xff1a;Qforepost&#xff09; 文丨浪味仙 排版丨沛贤 深度好文&#xff1a;1200字丨5分钟阅读 摘要&#xff1a;石油巨头沙特阿美与 Pasqal 开启合作&#xff0c;计划于 2025 年部署一台 200 量子比特的量子计算机&#xff…

uniapp星空效果

uniapp星空效果 背景实现思路代码实现尾巴 背景 之前在网上看到过一个视频&#xff0c;使用纯css实现过一个星空效果。具体出处找不到了&#xff0c;我们按照他那个思路来实现一个类似的效果&#xff0c;还是先上一张图镇楼&#xff1a; 实现思路 首先我们这个效果使用的是…

添加辅小区

4G 5G添加辅小区都是通过rrcConnectionReconfiguration消息的SCellToAddMod 4G -sCellToReleaseList-r10 :: SEQUENCE OF OPTIONAL:Omit-sCellToAddModList-r10 :: SEQUENCE OF SIZE(1..maxSCell-r10[4]) [1] OPTIONAL:Exist| -SCellToAddMod-r10 :: SEQUENCE [111]| -sCell…

python安装路径可以更改吗

Python3.5默认安装路径是当前用户的 AppData\.. 下 现在安装过程中默认是install just for me&#xff0c;这个会把python默认安装到AppData文件夹中&#xff0c;如果选了install for all users&#xff0c;就会默认安装到C盘根目录了。 python3.5 安装&#xff1a; 输入官网…

【论文速读】|探索ChatGPT在软件安全应用中的局限性

本次分享论文&#xff1a;Exploring the Limits of ChatGPT in Software Security Applications 基本信息 原文作者&#xff1a;Fangzhou Wu, Qingzhao Zhang, Ati Priya Bajaj, Tiffany Bao, Ning Zhang, Ruoyu "Fish" Wang, Chaowei Xiao 作者单位&#xff1a;威…

Linux命令和工具:包管理器工具yum命令使用详解

一、yum包管理器概述 Yum&#xff08;Yellowdog Updater Modified&#xff09;是一个非常流行的Linux包管理器&#xff0c;主要用于RPM包管理系统。它能够帮助用户安装、升级、降级和删除RPM包&#xff0c;同时也可以检索有关RPM包的信息。换一句话说&#xff0c;yum允许用户从…

linux系统硬盘读写慢的排查方法

如果服务器硬盘读写慢&#xff0c;可能会导致处理性能降低&#xff0c;用户响应慢。因此及时排除故障至关重要。下面是硬盘读写慢的排查思路。 1、top命令查看硬盘是否繁忙。 2、找出占用硬盘带宽高的进程。 通过iotop命令进行查看&#xff0c;iotop命令是用于展示硬盘读写操作…

【Linux】:Linux 2.6内核 调度队列和调度原理

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux 2.6内核 调度队列和调度原理&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a…

Mysql超详细安装配置教程(保姆级图文)

MySQL是一种流行的开源关系型数据库管理系统&#xff0c;它广泛用于网站和服务的数据存储和管理。MySQL以其高性能、可靠性和易用性而闻名&#xff0c;是许多Web应用程序的首选数据库解决方案之一。 一、下载安装包 &#xff08;1&#xff09;从网盘下载安装文件 点击此处直…

Redis常见数据类型(4) - hash, List

hash 命令小结 命令执行效果时间复杂度hset key field value设置值O(1)hget key field获取值O(1)hdel key field [field...]删除值O(k), k是field个数hlen key计算field个数O(1)hgetall key获取所有的field-valueO(k), k是field的个数hmget field [field...]批量获取field-va…

蓝桥杯-合并数列

小明发现有很多方案可以把一个很大的正整数拆成若干正整数的和。他采取了其中两种方案&#xff0c;分别将它们列为两个数组 {a1, a2, …, an} 和 {b1, b2, …, bm}。两个数组的和相同。 定义一次合并操作可以将某数组内相邻的两个数合并为一个新数&#xff0c;新数的值是原来两…

【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 布局管理器 | 网格布局Grid Layout 文章编号&#xff1a…

Go 切片常用操作与使用技巧

1.什么是切片 在 Go 语言中的切片&#xff08;slice&#xff09;是一种灵活的动态数组&#xff0c;它可以自动扩展和收缩&#xff0c;是 Go 语言中非常重要的数据结构之一。切片是基于数组实现的&#xff0c;它的底层是数组&#xff0c;可以理解为对底层数组的抽象。它会生成一…

Linux基础 -- perf工具使用及加载符号表

使用 perf 进行性能分析并加载符号文件 本文档介绍了如何使用 perf 工具进行性能分析&#xff0c;并结合符号文件查看详细的函数名和调用栈信息。 技术背景 perf 是 Linux 中的一个强大的性能分析工具&#xff0c;能够捕获和分析应用程序的性能数据。通过 perf record 命令&…

必应崩了?

目录 今天使用必应发现出现了不能搜索&#xff0c;弹出乱码的情况。 搜了一下&#xff0c;发现其他人也出现了同样的问题。 使用Edge浏览器的话&#xff0c;可以试着改一下DNS&#xff0c;有可能会恢复正常&#xff08;等官方修复了记得改回来&#xff09; 使用谷歌浏览器打开…

桂林电子科技大学计算机工程学院、广西北部湾大学计信学院莅临泰迪智能科技参观交流

5月18日&#xff0c;桂林电子科技大学计算机工程学院副院长刘利民、副书记杨美娜、毕业班辅导员黄秀娟、广西北部湾大学计信学院院长助理刘秀平莅临广东泰迪智能科技股份有限公司产教融合实训基地参观交流。泰迪智能科技副总经理施兴、广西分公司郑廷和、梁霜、培训业务部孙学镂…

中国医学健康管理数字化发展风向标——专家共话未来趋势

随着科技的飞速发展&#xff0c;数字化已经成为中国医学健康管理领域的重要发展方向。 2024年5月20日由中国管理科学研究院智联网研究所、中国民族医药协会医养教育委员会、国家卫健委基层健康服务站、中国老龄事业发展基金会、中国智联网健康管理系统平台、中国医学健康管理数…

Linux普通用户执行root权限命令的方法

当创建一个普通用户时&#xff0c;可能存在一些场景需要普通用户能够执行一些需要root权限的命令。以下介绍对应的方法。 1、添加用户 首先用adduser命令添加一个普通用户&#xff0c;命令如下&#xff1a; adduser keaising//添加一个名为keaising的用户 passwd keaising //…

express.js--token中间件验证及token解析(三)

主要作用 访问路由接口时&#xff0c;哪些需要校验token 通过token解析身份信息&#xff0c;就可以知道是哪个人 框架基本搭建express.js--基本用法及路由模块化(一)-CSDN博客 如何生成tokenexpress.js--生成token(二)-CSDN博客 middleware/index.js const jwt require(…

【openlayers系统学习】3.1-3.2彩色GeoTIFF图像渲染

一、彩色GeoTIFF图像渲染 Sentinel-2 卫星任务收集并传播覆盖地球陆地表面的图像&#xff0c;重访频率为 2 至 5 天。传感器收集多波段图像&#xff0c;其中每个波段都是电磁频谱的一部分。 2A 级 (L2A) 产品提供以下频段的表面反射率测量&#xff1a; BandDescriptionCentra…