electron-vite封装UI级的消息提示

2024-08-22 11:04

本文主要是介绍electron-vite封装UI级的消息提示,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

说明

Electron + Vite + Vue3 + Element Plus
Electron中写提示有两种方案:

  • 系统级:electron带的dialog相关API
  • UI级:UI框架内部的提示,如ElMessageElMessageBoxElNotification

今天来封装一下UI级别的提示

代码

效果图

在这里插入图片描述

源码

代码封装在hooks中,借鉴了若依:

// src/hooks/useMessage.js
import { ElMessage, ElMessageBox, ElNotification, ElLoading } from 'element-plus'let loadingInstance;export const useMessage = () => {return {// 消息提示info(content) {ElMessage.info(content)},// 错误消息error(content) {ElMessage.error(content)},// 成功消息success(content) {ElMessage.success(content)},// 警告消息warning(content) {ElMessage.warning(content)},// 弹出提示alert(content) {ElMessageBox.alert(content, '系统提示')},// 错误提示alertError(content) {ElMessageBox.alert(content, '系统提示', { type: 'error' })},// 成功提示alertSuccess(content) {ElMessageBox.alert(content, '系统提示', { type: 'success' })},// 警告提示alertWarning(content) {ElMessageBox.alert(content, '系统提示', { type: 'warning' })},// 通知提示notify(content) {ElNotification.info(content)},// 错误通知notifyError(content) {ElNotification.error(content)},// 成功通知notifySuccess(content) {ElNotification.success(content)},// 警告通知notifyWarning(content) {ElNotification.warning(content)},// 确认窗体confirm(content, tip) {return ElMessageBox.confirm(content, tip ? tip : '系统提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})},// 删除窗体delConfirm(content, tip) {return ElMessageBox.confirm(content ? content : '是否删除所选中数据?',tip ? tip : '系统提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})},// 提交内容prompt(content, tip) {return ElMessageBox.prompt(content, tip, {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'})},// 打开遮罩层loading(content) {loadingInstance = ElLoading.service({lock: true,text: content,background: "rgba(0, 0, 0, 0.7)",})},// 关闭遮罩层closeLoading() {loadingInstance.close();}}
}
用法

vue组件中直接引用:

import { useMessage } from "@/hooks/useMessage";
const message = useMessage()
message.confirm('马云想你转账500万,是否接收?')

这篇关于electron-vite封装UI级的消息提示的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1096091

相关文章

Golang如何对cron进行二次封装实现指定时间执行定时任务

《Golang如何对cron进行二次封装实现指定时间执行定时任务》:本文主要介绍Golang如何对cron进行二次封装实现指定时间执行定时任务问题,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录背景cron库下载代码示例【1】结构体定义【2】定时任务开启【3】使用示例【4】控制台输出总结背景

java向微信服务号发送消息的完整步骤实例

《java向微信服务号发送消息的完整步骤实例》:本文主要介绍java向微信服务号发送消息的相关资料,包括申请测试号获取appID/appsecret、关注公众号获取openID、配置消息模板及代码... 目录步骤1. 申请测试系统2. 公众号账号信息3. 关注测试号二维码4. 消息模板接口5. Java测试

IDEA Maven提示:未解析的依赖项的问题及解决

《IDEAMaven提示:未解析的依赖项的问题及解决》:本文主要介绍IDEAMaven提示:未解析的依赖项的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录IDEA Maven提示:未解析的依编程赖项例如总结IDEA Maven提示:未解析的依赖项例如

Python中对FFmpeg封装开发库FFmpy详解

《Python中对FFmpeg封装开发库FFmpy详解》:本文主要介绍Python中对FFmpeg封装开发库FFmpy,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、FFmpy简介与安装1.1 FFmpy概述1.2 安装方法二、FFmpy核心类与方法2.1 FF

电脑提示xlstat4.dll丢失怎么修复? xlstat4.dll文件丢失处理办法

《电脑提示xlstat4.dll丢失怎么修复?xlstat4.dll文件丢失处理办法》长时间使用电脑,大家多少都会遇到类似dll文件丢失的情况,不过,解决这一问题其实并不复杂,下面我们就来看看xls... 在Windows操作系统中,xlstat4.dll是一个重要的动态链接库文件,通常用于支持各种应用程序

VS配置好Qt环境之后但无法打开ui界面的问题解决

《VS配置好Qt环境之后但无法打开ui界面的问题解决》本文主要介绍了VS配置好Qt环境之后但无法打开ui界面的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目UKeLvb录找到Qt安装目录中designer.UKeLvBexe的路径找到vs中的解决方案资源

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A

电脑提示Winmm.dll缺失怎么办? Winmm.dll文件丢失的多种修复技巧

《电脑提示Winmm.dll缺失怎么办?Winmm.dll文件丢失的多种修复技巧》有时电脑会出现无法启动程序,因为计算机中丢失winmm.dll的情况,其实,winmm.dll丢失是一个比较常见的问... 在大部分情况下出现我们运行或安装软件,游戏出现提示丢失某些DLL文件或OCX文件的原因可能是原始安装包

SpringCloud整合MQ实现消息总线服务方式

《SpringCloud整合MQ实现消息总线服务方式》:本文主要介绍SpringCloud整合MQ实现消息总线服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录一、背景介绍二、方案实践三、升级版总结一、背景介绍每当修改配置文件内容,如果需要客户端也同步更新,

QT6中绘制UI的两种方法详解与示例代码

《QT6中绘制UI的两种方法详解与示例代码》Qt6提供了两种主要的UI绘制技术:​​QML(QtMeta-ObjectLanguage)​​和​​C++Widgets​​,这两种技术各有优势,适用于不... 目录一、QML 技术详解1.1 QML 简介1.2 QML 的核心概念1.3 QML 示例:简单按钮