Vue3 怎么在ElMessage消息提示组件中添加自定义icon图标
1、定义icon组件代码：
<template><svg :class="svgClass" aria-hidden="true"><use :xlink:href="iconName" :fill="color"/></svg>
</template><script>
export default defineComponent({props: {iconClass: {type: String,required: true},className: {type: String,default: ''},color: {type: String,default: ''},},setup(props) {return {iconName: computed(() => `#icon-${props.iconClass}`),svgClass: computed(() => {if (props.className) {return `svg-icon ${props.className}`}return 'svg-icon'})}}
})
</script><style scope lang="scss">
.sub-el-icon,
.nav-icon {display: inline-block;font-size: 15px;margin-right: 12px;position: relative;
}.svg-icon {width: 1em;height: 1em;position: relative;fill: currentColor;vertical-align: -2px;
}
.menu-svg {width: 1.4em;height: 1.4em;position: relative;fill: currentColor;vertical-align: -2px;
}
</style>
2、在父组件引入并在代码中使用
import SvgIcon from "@/components/SvgIcon";const msg = (name) => {ElMessage({message: `正在执行${name}任务`,icon: SvgIcon,customClass: 'custom-message', // 自定义类名，用于后续样式覆盖dangerouslyUseHTMLString: true, // 允许使用 HTML 字符串});
}
3、最后根据自定义类名添加背景图样式
.custom-message {background: url('../../../assets/images/alert-bg.png') no-repeat center;background-size: 100% 90%;border: none;top: 50px !important;width: 365px;
}
相关文章：
Vue3 怎么在ElMessage消息提示组件中添加自定义icon图标
1、定义icon组件代码： <template><svg :class"svgClass" aria-hidden"true"><use :xlink:href"iconName" :fill"color"/></svg> </template><script> export default defineComponen…...
17.Excel：实用的 VBA 自动化程序
一 excel 设置 开始-选项 二 批量创建工作表 某工作簿用于保存31天的东西，手动创建31个工作表不方便。 A1单元格输入内容，或者空着。从A2单元格开始，一定要以字符形式的，不能以数值和日期形式。12345这是数值形式，1月…...
：集群安全加固全攻略)
Kubernetes生产实战(十六)：集群安全加固全攻略
Kubernetes集群安全加固全攻略：生产环境必备的12个关键策略 在容器化时代，Kubernetes已成为企业应用部署的核心基础设施。但根据CNCF 2023年云原生安全报告显示，75%的安全事件源于K8s配置错误。本文将基于生产环境实践，系统讲解集…...
Cadence学习笔记之---导入PCB板框、网表
目录 01 | 引 言 02 | 环境描述 03 | 导入PCB板框 04 | 自画PCB板框 05 | 导入PCB网表 06 | 总 结 01 | 引 言 在上一篇小记中讲述了创建PCB工程的操作步骤、PCB工程中的类与子类，以及Cadence颇具特色的颜色管理器。 本篇小记主要记述如何导入PCB板框、自画…...
嵌入式硬件篇---麦克纳姆轮（简单运动实现）
文章目录 前言1. 麦克纳姆轮的基本布局X型布局O型布局 2. 运动模式实现原理(1) 前进/后退前进后退 (2) 左右平移向左平移向右平移 (3) 原地旋转顺时针旋转（右旋）逆时针旋转（左旋） (4) 斜向移动左上45移动 (5) 180旋转 3. 数学原理…...
en33网络配置文件未托管
从 nmcli device status 的输出可以看到，所有网络设备（包括 ens33）都处于 "未托管"（unmanaged）状态，这导致 NetworkManager 和传统的 network.service 都无法管理网络接口，从而引发 n…...
嵌入式学习--江协51单片机day4
昨天周五没有学习，因为中午没有睡觉，下午和晚上挤不出整块的时间。周日有考试今天也没有学很多啊，但以后周末会是学一天，另一天休息和写周总结。 今天学了串口通信和LED点阵屏，硬件原理是真的很迷，一但想搞…...
Hadoop 2.x设计理念解析
目录 一、背景 二、整体架构 三、组件详解 3.1 yarn 3.2 hdfs 四、计算流程 4.1 上传资源到 HDFS 4.2 向 RM 提交作业请求 4.3 RM 调度资源启动 AM 4.4 AM运行用户代码 4.5 NodeManager运行用户代码 4.6 资源释放 五、设计不足 一、背景 有人可能会好奇…...
diy装机成功录
三天前，我正式开启了这次装机之旅，购入了一颗性能强劲的 i5-12400 CPU，一块绘图能力出色的 3060ti 显卡，还有技嘉主板、高效散热器、16G 内存条、2T 固态硬盘，以及气派的机箱和风扇，满心期待能亲手打造一台…...
睿思量化小程序
睿思量化小程序是成都睿思商智科技有限公司最新研发和运营的金融数据统计分析工具，旨在通过量化指标筛选与多策略历史回测，帮助用户科学配置基金资产，成为个人投资者与机构用户的“智能化财富管家”。 核心功能：数据驱动决策&…...
STM32实现九轴IMU的卡尔曼滤波
在嵌入式系统中，精确的姿态估计对于无人机、机器人和虚拟现实等应用至关重要。九轴惯性测量单元（IMU）通过三轴加速度计、陀螺仪和磁力计提供全面的运动数据。然而，这些传感器数据常伴随噪声和漂移，单独使用无法满足高精…...
JS DOM操作与事件处理从入门到实践
对于前端开发者来说，让静态的 HTML 页面变得生动、可交互是核心技能之一。实现这一切的关键在于理解和运用文档对象模型 (DOM) 以及 JavaScript 的事件处理机制。本文将带你深入浅出地探索 DOM 操作的奥秘，并掌握JavaScript 事件处理的方方面面。 目录 …...
Hive表JOIN性能问
在处理100TB的Hive表JOIN性能问题时，需采用分层优化策略，结合数据分布特征、存储格式和计算引擎特性。以下是系统性优化方案： 1. 数据倾斜优化（Skew Join） 1.1 识别倾斜键 方法：统计JOIN键的分布频率&…...
关键点检测--使用YOLOv8对Leeds Sports Pose（LSP）关键点检测
目录 1. Leeds Sports Pose数据集下载2. 数据集处理2.1 获取标签2.2 将图像文件和标签文件处理成YOLO能使用的格式 3. 用YOLOv8进行训练3.1 训练3.2 预测 1. Leeds Sports Pose数据集下载 从kaggle官网下载这个数据集，地址为link，下载好的数据集文件如下…...
2025年客运从业资格证备考单选练习题
客运从业资格证备考单选练习题 1、从事道路旅客运输活动时，应当采取必要措施保证旅客的人身和财产安全，发生紧急情况时，首先应（ ）。 A. 抢救财产 B. 抢救伤员 C. 向公司汇报 答案：B 解析：…...
QMK自定义4*4键盘固件创建教程：最新架构详解
QMK自定义4*4键盘固件创建教程：最新架构详解 前言 通过本教程，你将学习如何在QMK框架下创建自己的键盘固件。QMK是一个强大的开源键盘固件框架，广泛用于DIY机械键盘的制作。本文将详细介绍最新架构下所需创建的文件及其功能。 准备工作 在…...
获取conan离线安装包
1、获取conan离线安装包 # apt-get install python3.12-venv pip #缓存的安装存放在/var/cache/apt/archives目录 # mkdir /myenv && cd /myenv #创建虚拟环境目录 # python3 -m venv myenv #创建虚拟环境 # source myenv/bin/activate #激活虚拟环境ÿ…...
【Java ee初阶】网络原理
应用层 由于下面的四层都是系统已经实现好了的，但是应用层是程序员自己写的，因此应用层是程序员最重要的一层。 应用层中，程序员通常需要定义好数据传输格式，调用传输层api（socket api）进行真正的网络通信…...
Makefile中 链接库，同一个库的静态库与动态库都链接了，生效的是哪个库
Makefile中 链接库，同一个库的静态库与动态库都链接了，生效的是哪个库 在 Makefile 中同时链接同一个库的静态库（.a）和动态库（.so）时，具体哪个库生效取决于链接顺序和编译器行为。以下是详细分析…...
【AI提示词】金字塔模型应用专家
提示说明 专业运用金字塔原理优化信息结构与逻辑表达，实现高效精准的思维传达。 提示词 # Role: 金字塔模型应用专家 ## Profile - **language**: 中文/英文 - **description**: 专业运用金字塔原理优化信息结构与逻辑表达，实现高效精准的思维传…...
电子电器架构 --- 车载以太网拓扑
我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。 老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界噪音的通透淡然。 生活中有两种人，一种人格外在意别人的眼光;另一种人无论…...
使用FastAPI微服务在AWS EKS上实现AI会话历史的管理
架构概述 本文介绍如何使用FastAPI构建微服务架构，在AWS EKS上部署两个微服务： 服务A：接收用户提示服务B：处理对话逻辑，与Redis缓存和MongoDB数据库交互 该架构利用AWS ElastiCache(Redis)实现快速响应，…...
Flutter PIP 插件 ---- 为iOS 重构PipController, Demo界面，更好的体验
接上文 Flutter PIP 插件 ---- 新增PipActivity，Android 11以下支持自动进入PIP Mode 项目地址 PIP， pub.dev也已经同步发布 pip 0.0.3，你的加星和点赞，将是我继续改进最大的动力 在之前的界面设计中，还原动画等体验一…...
vue开发用户注册功能
文章目录 一、开发步骤二、效果图三、搭建页面创建views/Login.vue在App.vue中导入Login.vue 四、数据绑定五、表单校验六、访问后端 API 接口，完成注册七、完整的Login.vue代码八、参考资料 一、开发步骤 二、效果图 三、搭建页面 创建views/Login.vue 完整内容在…...
Qt中的RCC
Qt资源系统(Qt resource system)是一种独立于平台的机制，用于在应用程序中传输资源文件。如果你的应用程序始终需要一组特定的文件(例如图标、翻译文件和图片)，并且你不想使用特定于系统的方式来打包和定位这些资源，则可以使用Qt资源系统。 最…...
muduo源码解析
1.对类进行禁止拷贝 class noncopyable {public:noncopyable(const noncopyable&) delete;void operator(const noncopyable&) delete;protected:noncopyable() default;~noncopyable() default; }; 2.日志 使用枚举定义日志等级 enum LogLevel{TRACE,DEBUG,IN…...
Qt QCheckBox 使用
1.开发背景 Qt QCheckBox 是勾选组件，具体使用方法可以参考 Qt 官方文档，这里只是记录使用过程中常用的方法示例和遇到的一些问题。 2.开发需求 QCheckBox 使用和踩坑 3.开发环境 Window10 Qt5.12.2 QtCreator4.8.2 4.功能简介 4.1 简单接口 QChec…...
【工具记录分享】提取bilibili视频字幕
F12大法 教程很多 但方法比较统一 例快速提取视频字幕！适用B站、AI字幕等等。好用 - 哔哩哔哩 无脑小工具 哔哩哔哩B站字幕下载_在线字幕解析-飞鱼视频下载助手 把链接扔进去就会自动生成srt文件 需要txt可以配合： SRT转为TXT...
设计模式【cpp实现版本】
文章目录 设计模式1.单例模式代码设计1.饿汉式单例模式2.懒汉式单例模式 2.简单工厂和工厂方法1.简单工厂2.工厂方法 3.抽象工厂模式4.代理模式5.装饰器模式6.适配器模式7.观察者模式 设计模式 1.单例模式代码设计 为什么需要单例模式，在我们的项目设计中&…...
Python数据分析案例74——基于内容的深度学习推荐系统（电影推荐）
背景 之前都是标准的表格建模和时间序列的预测，现在做一点不一样的数据结构的模型方法。 推荐系统一直是想学想做的，以前读研时候想学没多少相关代码，现在AI资源多了，虽然上班没用到这方面的知识，但是还是想熟悉一下…...
C PRIMER PLUS——第8节：字符串和字符串函数
目录 1. 字符串的定义与表示 2. 获取字符串的两种方式 3.字符串数组 4. 字符串输入函数 4.1 gets()（不推荐使用，有缓冲区溢出风险） 4.2 fgets()（推荐使用） 4.3 scanf() 4.4 gets_s()（C11 标准&…...
Dia浏览器：AI驱动浏览网页，究竟怎么样？（含注册申请体验流程）
名人说：博观而约取，厚积而薄发。——苏轼《稼说送张琥》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 目录 一、Dia浏览器简介1. 什么是Dia浏览器2. 开发背景与公司简介3. 与传统浏览器的区别 …...
milvus+flask山寨复刻《从零构建向量数据库》第7章
常规练手，图片搜索山寨版。拜读罗云大佬著作，结果只有操作层的东西可以上上手。 书中是自己写的向量数据库，这边直接用python拼个现成的milvus向量数据库。 1. 创建一个向量数据库以及对应的相应数据表： # Milvus Setup Argume…...
【大数据技术-HBase-关于Hmaster、RegionServer、Region等组件功能和读写流程总结】
Hmaster的作用 负责命名空间、表的创建和删除等一些DDL操作、region分配和负载均衡，并不参与数据读写，相比与其他大数据组件，如hdfs的namenode，在hbase中，Hmaster的作用是比较弱化的，即使挂掉，也暂时不影响现有表的读写。 RegionServer的作用 一个机器上一个regionse…...
用c语言实现——一个交互式的中序线索二叉树系统，支持用户动态构建、线索化、遍历和查询功能
知识补充：什么是中序线索化 中序遍历是什么 一、代码解释 1.结构体定义 Node 结构体： 成员说明： int data：存储节点的数据值。 struct Node* lchild：该节点的左孩子 struct Node* rchild：该节点的右孩子…...
Pale Moon：速度优化的Firefox定制浏览器
Pale Moon是一款基于Firefox浏览器的定制版浏览器，专为追求速度和性能的用户设计。它使用开放源代码创建，经过高度优化，适用于现代处理器，提供了更快的页面加载速度和更高效的脚本处理能力。Pale Moon不仅继承了Firefox的安全性和…...
广东省省考备考（第七天5.10）—言语：逻辑填空（每日一练）
错题 解析 第一空，搭配“各个环节”，根据“我国已经形成了相对完善的中药质量标准控制体系”可知，横线处应体现“包含”之意，C项“涵盖”指包括、覆盖，D项“囊括”指把全部包罗在内，均与“各个环节”搭配得…...
Gartner《Container发布与生命周期管理最佳实践》学习心得
近日，Gartner发布了《Best Practices for Container Release and Life Cycle Management》， 报告为技术专业人士提供了关于容器发布和生命周期管理的深入指导。这份报告强调了容器在现代应用开发和部署中的核心地位，并提供了一系列最佳实践&…...
内存、磁盘、CPU区别，Hadoop/Spark与哪个联系密切
1. 内存、磁盘、CPU的区别和作用 1.1 内存（Memory） 作用： 内存是计算机的短期存储器，用于存储正在运行的程序和数据。它的访问速度非常快，比磁盘快几个数量级。在分布式计算中，内存用于缓存中间结果、存储…...
SpringCloud之Eureka基础认识-服务注册中心
0、认识Eureka Eureka 是 Netflix 开源的服务发现组件，后来被集成到 Spring Cloud 生态中，成为 Spring Cloud Netflix 的核心模块之一。它主要用于解决分布式系统中服务注册与发现的问题。 Eureka Server 有必要的话，也可以做成集群…...
MySQL 中如何进行 SQL 调优？
在MySQL中进行SQL调优是一个系统性工程，需结合索引优化、查询改写、性能分析工具、数据库设计及硬件配置等多方面策略。以下是具体优化方法及案例说明： 一、索引优化：精准提速的关键 索引类型选择 普通索引：加速频繁查询的列&…...
Linux平台下SSH 协议克隆Github远程仓库并配置密钥
目录 注意：先提前配置好SSH密钥，然后再git clone 1. 检查现有 SSH 密钥 2. 生成新的 SSH 密钥 3. 将 SSH 密钥添加到 ssh-agent 4. 将公钥添加到 GitHub 5. 测试 SSH 连接 6. 配置 Git 使用 SSH 注意：先提前配置好SSH密钥，然…...
Android平台FFmpeg音视频开发深度指南
一、FFmpeg在Android开发中的核心价值 FFmpeg作为业界领先的多媒体处理框架，在Android音视频开发中扮演着至关重要的角色。它提供了： 跨平台支持：统一的API处理各种音视频格式完整功能链：从解码、编码到滤镜处理的全套解决方案灵…...
QSFP+、QSFP28、QSFP-DD接口分别实现40G、100G、200G/400G以太网接口
常用的光模块结构形式： 1）QSFP等效于4个SFP，支持410Gbit/s通道传输，可通过4个通道实现40Gbps传输速率。与SFP相比，QSFP光模块的传输速率可达SFP光模块的四倍，在部署40G网络时可直接使用QSFP光模块…...
MySQL事务和JDBC中的事务操作
一、什么是事务 事务是数据库操作的最小逻辑单元，具有"全有或全无"的特性。以银行转账为例： 典型场景： 从A账户扣除1000元 向B账户增加1000元 这两个操作必须作为一个整体执行，要么全部成功，要么全部失败…...
Linux系统下安装mongodb
1. 配置MongoDB的yum仓库 创建仓库文件 sudo vi /etc/yum.repos.d/mongodb-org.repo添加仓库配置 根据系统版本选择配置（以下示例为CentOS 7和CentOS 9的配置）： CentOS 7（安装MongoDB 5.0/4.2等旧版本）： In…...
JavaScript篇：async/await 错误处理指南：优雅捕获异常，告别失控的 Promise！
大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了…...
智能时代下，水利安全员证如何引领行业变革？
当 5G、AI、物联网等技术深度融入水利工程，传统安全管理模式正经历颠覆性变革。在这场智能化浪潮中，水利安全员证扮演着怎样的角色？又将如何重塑行业人才需求格局？ 水利工程智能化转型对安全管理提出新挑战。无人机巡检、智能监测…...
使用FastAPI和React以及MongoDB构建全栈Web应用03 全栈开发快速入门
一、什么是全栈开发 A full-stack web application is a complete software application that encompasses both the frontend and backend components. It’s designed to interact with users through a web browser and perform actions that involve data processing and …...
NHANES稀有指标推荐：HALP score
文章题目：Associations of HALP score with serum prostate-specific antigen and mortality in middle-aged and elderly individuals without prostate cancer DOI：10.3389/fonc.2024.1419310 中文标题：HALP 评分与无前列腺癌的中老年人血清…...