针对vue3的render函数添加自定义指令

话不多说 直接上代码 

主要是给h函数设置自定义指令控制

import '@/styles/reset.css'
import '@/styles/global.scss'
import 'uno.css'import { createApp } from 'vue'
import App from './App.vue'
import { setupRouter } from './router'
import { setupStore } from './store'
import { setupNaiveDiscreteApi } from './utils'
import { setupDirectives } from './directives'
import { permissions } from './globalVariables'async function bootstrap() {const app = createApp(App)// 注册全局变量  添加permissions权限app.config.globalProperties.$permissions = permissionssetupStore(app)setupDirectives(app)await setupRouter(app)app.mount('#app')setupNaiveDiscreteApi()
}bootstrap()

import { router } from '@/router'const permission = {mounted(el, binding) {//拿到当前的route信息const currentRoute = unref(router.currentRoute)去取按钮权限集合const btns = currentRoute.meta?.btns?.map(item => item.code) || []//判断当前是否存在if (!btns.includes(binding.value)) {el.remove()}},
}export function setupDirectives(app) {//注册自定义指令app.directive('permission', permission)
}

//resolveDirective 获取当前已经注册过的自定义指令
//withDirectives vue3提供给虚拟dom添加自定义指令的函数
//getCurrentInstance 获取上下文
import { resolveDirective, withDirectives } from 'vue'// 获取 按钮权限 
const permissions = getCurrentInstance()?.appContext.config.globalProperties.$permissions
//获取resolveDirective当前已经注册的指令名 也就是v-xxxx
const permissionDirective = resolveDirective('permission'){title: '操作',key: 'actions',align: 'center',width: 100,fixed: 'right',render: (row) => {return [withDirectives(h(NButton,{size: 'small',type: 'primary',secondary: true,onClick: () => handleAddOrEdit('edit', row),},{ default: () => '修改' },),// 添加权限控制[[permissionDirective, permissions.editNotification]],),//交集设置h是否展示row.xxx === 2 && withDirectives(h(NButton,{size: 'small',type: 'error',style: 'margin-left: 12px;',secondary: true,onClick: () => handleDeleteRow(row),},{ default: () => '删除' },),[[permissionDirective, permissions.delNotification]],),]},},

针对需要判断状态的时候

把他们放在同一级

row.state !== 2 && withDirectives(h(NButton,{size: 'small',type: row.state === 0 ? 'error' : 'warning',style: 'margin-left: 12px;',secondary: true,onClick: () => handlemore('6', row),},{ default: () => row.state === 0 ? '冻结' : '解冻' },),[[permissionDirective, permissions.frozenUser]],),

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

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

相关文章

Android studio之编译提示Could not find :umeng-asms-v1.2.1

1 、问题 Could not determine the dependencies of task :app:compileDebugJavaWithJavac. > Could not resolve all task dependencies for configuration :app:debugCompileClasspath.> Could not find :umeng-asms-v1.2.1:.Required by:project :app> Could not …

FGF14:脑部疾病新潜力靶标

成纤维细胞生长因子14(FGF14)是FGF11亚家族成员,在神经元的所有基本特性(内在放电、兴奋性和抑制性神经元的突触传递和可塑性)中发挥作用。 (数据来源AlphaFold) FGF14由247个氨基酸组成&#x…

实战篇(九):解锁3D魔方的秘密:用Processing编程实现交互式魔方

解锁3D魔方的秘密:用Processing编程实现交互式魔方 使用 Processing 创建一个 3D 魔方效果展示1. 安装 Processing2. 项目结构3. 代码实现4. 代码解释4.1. 初始化魔方4.2. 绘制魔方4.3. 处理鼠标事件4.4. 检查点击的面4.5. 旋转面和最终确定旋转5. 运行和测试6. 细节解释6.1. …

【资源调度】2-如何解决资源调度问题?

导读:本期是全网最全【资源调度】系列推文的第2期(共50期左右)。上期我们在《何为调度?》中,对调度的定义与作用、计划与调度的关系、调度问题的拆解做了详细介绍。从本期开始,我们选择【客服调度】场景作为【资源调度】问题的具象…

51单片机(STC8H8K64U/STC8051U34K64)_RA8889_8080参考代码(v1.3)

硬件:STC8H8K64U/STC8051U34K64 RA8889开发板 硬件跳线变更为并口8080模式,PS00x,R143,R142不接,R141无关 8080接口电路连接图: 实物连接图: RA8889开发板外接MCU连接器之引脚定义&…

IMS架构中的注册与会话流程:RTPEngine集成及消息路由详解

目录 S-CSCF 调用 RTPengine 整体路由 注意 IMS 注册流程 和 IMS 会话流程 的区别 IMS注册流程 IMS会话流程(如INVITE请求) 这种设计的原因 P-CSCF 调用 RTPengine S-CSCF 调用 RTPengine 整体路由 UA a生成SDP offer,发送SIP INVITE请求(包含SDP offer)&…

核密度估计KDE和概率密度函数PDF(深入浅出)

目录 1. 和密度估计(KDE)核密度估计的基本原理核密度估计的公式核密度估计的应用Python中的KDE实现示例代码 结果解释解释结果 总结 2. 概率密度函数(PDF)概率密度函数(PDF)是怎么工作的:用图画…

RDNet实战:使用RDNet实现图像分类任务(二)

文章目录 训练部分导入项目使用的库设置随机因子设置全局参数图像预处理与增强读取数据设置Loss设置模型设置优化器和学习率调整策略设置混合精度,DP多卡,EMA定义训练和验证函数训练函数验证函数调用训练和验证方法 运行以及结果查看测试完整的代码 在上…

ubuntu显卡驱动重启后失效的解决办法

写在前方:ubuntu系统,显卡重启后驱动失效,显卡不可用。网上冲浪之后得以有效解决,以下是解决方案 查看显卡nvidia-smi;驱动失效消息: (base) rootnode:~# nvidia-smi NVIDIA-SMI has failed because it c…

AI大模型走进汽车车机,智驾将是未来

车机里的AI大模型在汽车行业中的应用越来越广泛,主要体现在智能座舱和自动驾驶系统的深度融合上。通过将AI大模型应用于车机系统,可以实现更高智能化的人车交互体验。AI大模型作为人工智能发展的核心引擎,正在成为汽车智能化发展的关键之一。…

基于颜色模型和边缘检测的火焰识别FPGA实现,包含testbench和matlab验证程序

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 (完整程序运行后无水印) 将FPGA仿真结果导入到matlab显示结果: 测试样本1 测试样本2 测试样本3 2.算法运行软件版本 vivado2019.2 …

MySQL配置数据库的连接命令

MySQL配置数据库连接命令 在MySQL中,配置数据库连接的命令涉及创建用户、授予权限、配置主从复制等多个方面。以下是常用的命令及其用途: 创建用户 创建一个新的数据库用户并为其设置密码: CREATE USER usernamehost IDENTIFIED BY passwo…

mysql中的存储过程

存储过程的作用:有助于提高应用程序的性能。存储过程可以不必发送多个冗长的SQL语句 废话不说多,直接实操 ##实现num的相加 delimiter $$ CREATE PROCEDURE test1 () begindeclare num int default 0; -- 声明变量,赋默认值为0select num20;end $$ delimiter ; …

计算机网络高频面试题

从输入URL到展现页面的全过程: 用户在浏览器中输入URL。浏览器解析URL,确定协议、主机名和路径。浏览器查找本地DNS缓存,如果没有找到,向DNS服务器发起查询请求。DNS服务器解析主机名,返回IP地址。浏览器使用IP地址建立…

Kafka配置SASL认证

Kafka加密 Kafka认证方式 在本博客中我们使用SASL/PLAIN的方式来进行Kafka加密 环境准备 Kafka集群环境 请参考之前的Kafka集群搭建 kafka-broker1kafka-broker2 集群配置SASL/PLAIN认证 用户校验 修改server.properties 让其支持Kafka的认证(每一个broker节点都需要修改这…

jail内部ubuntu apt升级失败问题解决

在FreeBSD jail 里安装启动Ubuntu jammy系统,每次装好执行jexec ubjammy sh进入Ubuntu系统后,执行apt update报错。 这个问题困惑了好久,突然有一天仔细去看报错信息,查看了(man 5 apt.conf) ,才搞定问题。简单来说就是…

MySQL 数据库(基础)- 函数

MySQL 数据库(基础)- 函数 介绍 函数 是指一段可以被另一段程序调用的程序或代码。也意味着,这一段程序或代码在 MySQL 中已经给我们提供了,我们需要做的就是在合适的业务场景调用对应的函数,完成对应的业务需求即可…

python的简单爬取

需要的第三方模块 requests winr打开命令行输入cmd 简单爬取的基本格式(爬取百度logo为例) import requests url"http://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" resprequests.get(url)#回应 #保存到本地 with open(&…

中国物流信息软件系统(WMS等)行业概览,2027年将达到235.1亿元

导语 大家好,我是社长,老K。专注分享智能制造和智能仓储物流等内容。 新书《智能物流系统构成与技术实践》人俱乐部 完整版文件和更多学习资料,请球友到知识星球【智能仓储物流技术研习社】自行下载 这份文件是《2023年中国物流信息软件系统行…

【Python】下载与安装

目录 一、 下载安装Python 1. 配置环境变量 2. 检查是否配置成功 一、 下载安装Python 在我上传的资源可以免费下载!!! https://download.csdn.net/download/m0_67830223/89536665?spm1001.2014.3001.5501https://download.csdn.net/dow…