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

vue3 + Element Plus + ts 封装全局的 message、messageBox、notification 方法

news 来源：原创 2025/8/3 23:00:35

本文示例将 Element Plus 中的 ElMessage 消息提示, ElMessageBox 消息弹出框, ElNotification 消息通知 方法统一封装到全局 hooks 文件中方便全局调用

准备：在项目 src 目录中新建 hooks 目录、然后在 hooks 目录中新建 index.ts （如果你没有使用 ts 也可以建 index.js）文件（主要用于将全局的方法放到这个文件中），当然，你可以根据自己的习惯或喜好将示例代码放置到其他地方。

完整代码（ts 版）

// 用于封装一些全局的hook，可以单独导入某些方法使用，也可以统一导入 hook 对象，从 hook 对象中 . 具体的方法import { ElMessage, ElMessageBox, ElNotification } from 'element-plus'/*** 封装一个全局的 message 方法，用于显示消息提示* @param message 消息内容* @param type 消息类型，默认为 success* @param [options] 消息选项*/
export const message = (message: string,type: 'success' | 'warning' | 'info' | 'error' = 'success',options: any = {}
) => {ElMessage({message,type,...options})
}
/*** 封装一个全局的 confirm 方法，用于显示确认对话框* @param message 对话框内容* @param title 对话框标题，默认为 '提示'* @param [options] 对话框选项* @return Promise<boolean>*/
export const confirm = (message: string, title: string = '提示', options: any = {}) => {if (Object.keys(options).length === 0) {options = {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}}return new Promise((resolve, reject) => {ElMessageBox.confirm(message, title, options).then(() => {resolve(true)}).catch(() => {reject(false)})})
}
/*** 封装一个全局的 notification 方法，用于显示通知* @param message 通知内容* @param title 通知标题，默认为 '提示'* @param [options] 通知选项*/
export const notification = (message: string, title: string = '提示', options: any = {}) => {ElNotification({title,message,...options})
}/*** 统一导出一个 hook 方法对象，包含所有 hook 方法*/
export default {message,confirm,notification
}

注：这是完整代码，如果你的项目也是 vue3 + Element Plus + ts 那么你可以直接全部复制放到你创建的 .ts 文件中，然后在页面中导入使用它们。

使用示例

导入（注意核实你的文件路径）

import hooks from '@/hooks/index'

使用示例

hooks.message('操作成功') // 成功弹出hooks.notification('恭喜你学会了使用全局通知组件', '操作成功', { type: 'success' }) // 成功弹出hooks.confirm('确认要删除吗？').then((res) => console.log(res)) // 成功弹出

注：使用时也可以根据 Element Plus 官方文档的配置项传入你需要的配置，按方法参数格式传入即可

vue3 + Element Plus + ts 封装全局的 message、messageBox、notification 方法

本文示例将 Element Plus 中的 ElMessage 消息提示, ElMessageBox 消息弹出框, ElNotification 消息通知方法统一封装到全局 hooks 文件中方便全局调用准备：在项目 src 目录中新建 hooks 目录、然后在 hooks 目录中新建 index.ts （如果你没有使用 ts …...

编程日记 2025/8/3 23:00:35

【人工智能】Python在机器学习与人工智能中的应用

Python因其简洁易用、丰富的库支持以及强大的社区，被广泛应用于机器学习与人工智能（AI）领域。本教程通过实用的代码示例和讲解，带你从零开始掌握Python在机器学习与人工智能中的基本用法。 1. 机器学习与AI的Python生态系统 Pyth…...

编程日记 2025/8/3 22:53:43

linux上安装docker

在 Linux 上安装 Docker 是一个相对简单的过程。以下是针对 Debian 和其他基于 Debian 的发行版（如 Ubuntu）的详细步骤。如果您使用的是其他发行版（如 CentOS 或 Fedora），也可以参考相应的官方文档进行安装。安装 Do…...

编程日记 2025/8/3 22:54:50

LeetCode:1008. 前序遍历构造二叉搜索树

目录题目描述: 代码: 第一种: 第二种: 第三种:分治法题目描述: 给定一个整数数组，它表示BST(即二叉搜索树 )的先序遍历 ，构造树并返回其根。保证对于给定的测试用例，总是有可能找到具有给定需求的二叉搜索树。二叉搜索树是一棵…...

编程日记 2025/8/3 22:54:47

开源远程桌面工具:RustDesk

在远程办公和远程学习日益普及的今天，我们经常需要远程访问办公电脑或帮助他人解决电脑问题。市面上的远程控制软件要么收费昂贵，要么需要复杂的配置，更让人担心的是数据安全问题。最近我发现了一款名为 RustDesk 的开源远程桌面工具&…...

编程日记 2025/7/30 17:47:02

nfs服务器--RHCE

一，简介 NFS（Network File System，网络文件系统）是FreeBSD支持的文件系统中的一种，它允许网络中的计算机（不同的计算机、不同的操作系统）之间通过TCP/IP网络共享资源，主要在unix系…...

编程日记 2025/8/3 22:55:35

使用 Elastic 3 步实现基于 OTel 的原生 K8s 和应用可观测性

作者：来自 Elastic Bahubali Shetti Elastic 的 OpenTelemetry 发行版现已支持 OTel Operator，可使用 EDOT SDK 自动检测应用程序，并管理 EDOT OTel Collector 的部署和生命周期以实现 Kubernetes 可观察性。了解如何通过 3 个简单步骤进行配…...

编程日记 2025/8/3 22:56:34

Vue3-小兔鲜项目出现问题及其解决方法（未写完）

基础操作 （1）使用create-vue搭建Vue3项目要保证node -v 版本在16以上 （2）添加pinia到vue项目 npm init vuelatest npm i pinia //导入creatPiniaimport {createPinia} from pinia//执行方法得到实例const pinia createPinia()…...

编程日记 2025/7/29 22:08:20

【mysql】锁机制 - 3.意向锁

意向锁（Intension Lock） 是为了提高粗粒度锁性能而设置的一种预判机制，即在一个操作发起实际资源的锁申请行为之前，先对更粗力度的资源发起一个加锁意向声明。为什么需要意向锁？ 比如对于以下操作： 事务…...

编程日记 2025/8/3 22:54:48

Nuxt3 动态路由URL不更改的前提下参数更新，NuxtLink不刷新不跳转，生命周期无响应解决方案

Nuxt3 动态路由URL不更改的前提下参数更新，NuxtLink不刷新不跳转，生命周期无响应解决方案首先说明一点，Nuxt3 的动态路由响应机制是根据 URL 是否更改，参数的更改并不会触发 Router 去更新页面，这在 Vue3 上同样存在…...

编程日记 2025/8/3 22:53:40

Spring Boot集成Redis：配置、序列化与持久化

Spring Boot集成Redis：配置、序列化与持久化一、简介什么是Redis Redis是一个开源的、基于内存的高性能键值对存储数据库，支持多种数据结构如字符串、哈希、列表、集合等。它以其卓越的性能、高可用性和持久性而广受欢迎。为什么要使用Redis Red…...

编程日记 2025/8/1 7:18:47

JAVA：探索 PDF 文字提取的技术指南

1、简述随着信息化的发展，PDF 文档成为了信息传播的重要媒介。在许多应用场景下，如数据迁移、内容分析和信息检索，我们需要从 PDF 文件中提取文字内容。JAVA提供了多种库来处理 PDF 文件，其中 PDFBox 和 iText 是最常用的两个。…...

编程日记 2025/7/30 10:02:17

当你项目服务器磁盘报警

当你们公司运维收到这样的邮件，大概率日志文件过大引起的在Linux下如何不停止服务,清空nohup.out文件呢？ nohup.out会一直一直自己增长下去，如果你的服务器硬盘不给力的话，很容易把应用也挂掉（硬盘没空间 &#xff0…...

编程日记 2025/8/3 4:10:34

SpringBoot中Maven的定义及国内源配置教程，实现自动获取Jar包

推荐一个国内镜像API网站，无需信用卡及科学上网即可调用gpt，claude3，gemini等国外模型，感兴趣的可以看下👉：https://api.atalk-ai.com/ SpringBoot中Maven的定义及国内源配置教程，实现自动获取J…...

编程日记 2025/7/31 13:55:52

LSTM 和 LSTMCell

1. LSTM 和 LSTMCell 的简介 LSTM (Long Short-Term Memory): 一种特殊的 RNN（循环神经网络），用于解决普通 RNN 中梯度消失或梯度爆炸的问题。能够捕获长期依赖关系，适合处理序列数据（如自然语言、时间序列等&…...

编程日记 2025/8/2 18:59:12

【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现（Kalman Filter）

【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现（Kalman Filter） 更新以gitee为准： 文章目录数据预测概念和适用方式线性系统的适用性数据预测算法和卡尔曼滤波公式推导状态空间方程和观测器先验估计后验估计…...

编程日记 2025/7/28 13:18:48

神经网络问题之一：梯度消失（Vanishing Gradient）

梯度消失（Vanishing Gradient）问题是深度神经网络训练中的一个关键问题，它主要发生在反向传播过程中，导致靠近输入层的权重更新变得非常缓慢甚至几乎停滞，严重影响网络的训练效果和性能。图1 在深度神经网络中容易出现…...

编程日记 2025/8/3 22:57:23

【微软：多模态基础模型】（4）统一视觉模型

欢迎关注[【youcans的AGI学习笔记】](https://blog.csdn.net/youcans/category_12244543.html）原创作品【微软：多模态基础模型】（1）从专家到通用助手【微软：多模态基础模型】（2）视觉理解【微…...

编程日记 2025/8/3 9:26:35

npm | Yarn | pnpm Node.js包管理器比较与安装

一、包管理器比较参考原文链接： 2024 Node.js Package Manager 指南：npm、Yarn、pnpm 比较 — 2024 Node.js Package Manager Guide: npm, Yarn, pnpm Compared (nodesource.com) 以下是对 Node.js 的三个包管理工具 npm、Yarn 和 pnpm 的优缺点总结&am…...

编程日记 2025/7/30 23:34:39

建造者模式

什么是建造者模式？ 建造者模式（Builder Pattern）是一种设计模式，用来一步步创建复杂的对象，而不用直接去调用复杂的构造函数或手动设置大量属性。你可以： • 按步骤“搭建”对象。 • 自由选择要设置的部…...

编程日记 2025/8/2 9:38:21

Spring Boot核心概念：应用配置

Spring Boot提供了强大的配置系统，允许开发者通过配置文件轻松管理应用的配置。支持的主要配置文件格式有两种：application.properties和application.yml。 application.properties与application.yml application.properties和application.yml是Spring…...

编程日记 2025/8/2 17:10:04

linux环境安装cuda toolkit

1 全新安装如果环境中没安装过cuda版本， 这种情况下比较简单。直接在https://developer.nvidia.com/cuda-toolkit-archive选择对应版本下载安装即可。如下为安装cuda toolkit 11.8. 2 环境中已经存在其他版本这种情况下比较复杂一些。首先要确认最高支持的版…...

编程日记 2025/8/3 21:21:51

WebSocket实战，后台修改订单状态，前台实现数据变更，提供前端和后端多种语言

案例场景： 在实际的后台中需要变更某个订单的状态，在官网中不刷新页面，可以自动更新状态在前端页面实现订单状态的实时更新（不刷新页面），可以通过 WebSocket 的方式与后台保持通信，监听订单状态…...

编程日记 2025/7/31 22:33:59

实时通信协议概述：WebRTC、RTP/RTCP、RTMP、HLS 和 FLV 的比较与应用

文章目录一、协议总览二、WebRTC2.1 时序图2.2 代码示例三、RTP/RTCP3.1 时序图3.2 代码示例四、RTMP4.1 时序图4.2 代码示例五、HLS5.1 时序图5.2 代码示例六、总结一、协议总览协议/格式细节对比适用场景用法WebRTC使用 UDP 传输协议，支持 P2P 通信&#…...

编程日记 2025/8/2 23:46:47

Vue路由

目录 1. 安装 vue-router 2. 创建 Vue 项目结构 3. 配置路由 4. 在 main.js 中使用路由 5. 在 App.vue 中添加 6. 创建组件 7. 运行你的应用在 Vue.js 2 中，路由管理通常通过 vue-router 插件来实现。vue-router 是一个官方的路由管理器，允许你…...

编程日记 2025/7/31 9:48:06

uniapp开发微信小程序笔记3-全局配置、导航栏配置、tabBar配置

前言： 本文记录的是微信小程序的全局配置、导航栏配置、tabBar配置一、全局配置： 可以直接查官方文档：pages.json 页面路由 | uni-app官网，有非常详细的文档说明都是在 pages.json里面做配置的，我们可以看到已经有…...

编程日记 2025/8/1 6:48:49

Hash table类算法【leetcode】

哈希表中关键码就是数组的索引下标，然后通过下标直接访问数组中的元素那么哈希表能解决什么问题呢，一般哈希表都是用来快速判断一个元素是否出现集合里。例如要查询一个名字是否在这所学校里。要枚举的话时间复杂度是O(n)，但如果使用哈希…...

编程日记 2025/8/3 21:06:57

多算法模型（BI-LSTM GRU Mamba ekan xgboost）实现功率预测

概述本项目旨在通过结合多算法模型网络实现功率预测。包括数据处理、特征工程、模型训练、模型推理和结果输出，最终结果以 JSON 格式返回。代码地址：代码...

编程日记 2025/8/2 22:24:53

html 图片转svg 并使用svg路径来裁剪html元素

1.png转svg 工具地址: Vectorizer – 免费图像矢量化打开svg图片,复制其中的path中的d标签的路径查看生成的svg路径是否正确在线SVG路径预览工具 - UU在线工具 2.在html中使用svg路径 <svg xmlns"http://www.w3.org/2000/svg" width"318px" height…...

编程日记 2025/7/16 15:29:33

贴代码框架PasteForm特性介绍之select,selects,lselect和reload

简介 PasteForm是贴代码推出的 “新一代CRUD” ，基于ABPvNext，目的是通过对Dto的特性的标注，从而实现管理端的统一UI，借助于配套的PasteBuilder代码生成器，你可以快速的为自己的项目构建后台管理端！目前管…...

编程日记 2025/7/29 22:51:58

【Redis】实现异步秒杀功能

一、将判断条件提前缓存到redis中将判断条件缓存到redis中，如果判断成功直接操作redis中的数据，然后将数据写入redis，如果成功返回一个值。然后根据这个值判断是否成功，如果成功把用户id，优惠卷id，订单id存…...

编程日记 2025/7/31 16:12:45

React的API✅

createContext createContext要和useContext配合使用，可以理解为 “React自带的redux或mobx” ，事实上redux就是用context来实现的。但是一番操作下来我还是感觉，简单的context对视图的更新的细粒度把控比不上mobx，除非配合memo等…...

编程日记 2025/8/1 1:33:17

2024亚太杯数学建模C题【Development Analyses and Strategies for Pet Industry 】思路详解

C：宠物行业及相关产业的发展分析与战略随着人们消费观念的发展，宠物行业作为一个新兴产业，正在全球范围内逐渐积聚势头，这得益于快速的经济发展和人均收入的提高。1992年，中国小动物保护协会成立，随后1993…...

编程日记 2025/8/2 18:28:18

使用Notepad++工具去除重复行

使用Notepad工具去除重复行参考链接：https://blog.csdn.net/londa/article/details/108981396 一、使用正则表达式 1、对文本进行排序，让重复行排在一起 2、使用正则表达式替换（注意）^(.*?)$\s?^(?.*^\1$) 在替换时选择正…...

编程日记 2025/7/17 1:22:11

Three.js + AI：AI 算法生成 3D 萤火虫飞舞效果~

AI 驱动 3D 动画大家好，我是石小石！随着 Web 技术的发展，Three.js 成为构建 3D 图形和动画的主流工具。与此同时，人工智能（AI）在图像处理、动作生成等领域表现出强大能力。将 AI 与 Three.js 结合&#x…...

编程日记 2025/8/3 7:19:52

VScode clangd插件安装

前提在VScode中写C代码时，总会用到 C/C 这个插件，也就自然而然地使用了这个插件带来的代码跳转和代码提示功能。但是当代码变地很多时，就会变得非常慢。所以经过调查后弃用C/C 插件的这个功能，使用 clangd 这个插件来提示C代码和…...

编程日记 2025/7/30 15:26:22

Swift从0开始学习对象和类 day3

类（Class） 是一种类型或模板，描述了对象的特征和行为。对象（Object） 是类的实例，实际的实体，拥有自己的数据。新入门的教学都喜欢用“人”来举例为类，在这里我也用“人”吧 //&…...

编程日记 2025/7/29 13:49:55

1.使用nmcli添加静态网络连接 nmcli con add con-name static-addr \ ifname eth0 type ethernet ipv4.method manual ipv4.dns 172.25.250.220 \ ipv4.addresses 172.25.250.10/24 ipv4.gateway 172.25.250.254 命令概述这是一条使用 nmcli（NetworkManager 命令…...

编程日记 2025/8/3 5:33:39

RabbitMQ实现异步下单与退单

前言： 在电商项目中的支付模块也是一个很重要的模块，其中下订操作以及退订操作就是主要的操作。其次的下单是同步下单，也就是第三方支付、数据库扣减、积分增加、等等其他业务操作，等待全部执行完毕后向用户返回成功响应请求。对…...

编程日记 2025/8/2 18:53:40

[Python] 编程入门：理解变量类型

文章目录 [toc] 整数常见操作浮点数字符串字符串中混用引号问题字符串长度计算字符串拼接布尔类型动态类型特性类型转换结语收录专栏：[Python] 在编程中，变量是用于存储数据的容器，而不同的变量类型则用来存储不同种类的数据。Python 与 C…...

编程日记 2025/7/28 21:09:43

C++ —— 剑斩旧我破茧成蝶—C++11

江河入海，知识涌动，这是我参与江海计划的第2篇。目录 1. C11的发展历史 2. 列表初始化 2.1 C98传统的{} 2.2 C11中的{} 2.3 C11中的std::initializer_list 3. 右值引用和移动语义 3.1 左值和右值 3.2 左值引用和右值引用 3.3 引用延长生命周期…...

编程日记 2025/8/3 1:15:41

Perl 简介

Perl 简介 Perl 是一种高级、通用、解释型、动态编程语言。由 Larry Wall 于 1987 年首次发布，它结合了 C、sed、awk 和 shell 脚本语言的特性。Perl 最初被设计用于文本处理，如报告生成和文件转换，但随着时间的推移，它已经发展成…...

编程日记 2025/8/2 23:05:56

Transformer中的Self-Attention机制如何自然地适应于目标检测任务

Transformer中的Self-Attention机制如何自然地适应于目标检测任务： 特征图的降维与重塑首先，Backbone（如ResNet、VGG等）会输出一个特征图，这个特征图通常具有较高的通道数、高度和宽度（例如CHW&#xff…...

编程日记 2025/8/2 11:40:52

【Linux篇】初学Linux，如何快速搭建Linux开发环境

文章目录前言1. Linux背景介绍1.1 UNIX的发展历史1.2 Linux的发展历史 2. 企业应用现状3. 开源3.1 探索Linux源代码3.2 开源 VS 闭源 4. Linux的版本4.1 技术线4.2 商业产品线 5. os概念，定位6. 搭建Linux环境6.1 Linux环境的搭建方式6.2 购买云服务器 7. 使用XShe…...

编程日记 2025/8/2 13:33:31

竞赛思享会 | 2024年第十届数维杯国际数学建模挑战赛D题【代码+演示】

Hello，这里是Easy数模！以下idea仅供参考，无偿分享！ 题目背景本题旨在通过对中国特定城市的房产、人口、经济、服务设施等数据进行分析，评估其在应对人口老龄化、负增长趋势和极端气候事件中的韧性与可持续发展能力。…...

编程日记 2025/8/1 13:07:28

vim 使用技巧

使用技巧正常模式（Normal Mode）插入模式（Insert Mode）命令模式（Command Mode） vim常用三种模式包括正常模式，插入模式，命令模式。正常模式（Normal Mode） 进…...

编程日记 2025/7/30 7:39:57

CSS-flex布局

flex常用语法 display: flex 父级元素相关 flex-direction 主轴方向【水平方向（默认）、垂直方向】justify-content 主轴上的对齐方式【flex-end结束对齐、space-between两端对齐、center】align-items 交叉轴的对齐方式【center、flex-end】flex-wrap…...

编程日记 2025/7/28 20:49:02

小R的随机播放顺序

问题描述小R有一个特殊的随机播放规则。他首先播放歌单中的第一首歌，播放后将其从歌单中移除。如果歌单中还有歌曲，则会将当前第一首歌移到最后一首。这个过程会一直重复，直到歌单中没有任何歌曲。例如，给定歌单 [5, 3, 2, 1,…...

编程日记 2025/7/31 20:03:06

docker常见命令

1.启动容器 docker run 运行容器 docker run -d 守护线程运行容器 docker run -p 80:80 指定端口运行容器，左侧为服务器端口，右侧为容器端口 docker run --rm 停止容器后销毁 docker --name 指定容器名称 2.停止容器 docker stop (id/name) …...

编程日记 2025/8/2 17:05:37

C语言-指针作为函数返回值及二级指针

1、指针作为函数返回值 c语言允许函数的返回值是一个指针（地址）我们将这样的函数称为指针函数，下面的例子定义一了一个函数strlong（），用来返回两个字符串中较长的一个： 1. #include <stdio…...

编程日记 2025/8/1 16:10:41

完整代码（ts 版）

使用示例

相关文章：