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

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性:封装、继承、多态 。而类和对象阶段,主要研究的就是封装特性。何为封装呢?简单来说就是套壳屏蔽细节 。     比如:对于电脑这样一个复杂的设备,提供给用户的就只是:开关机、通过键盘输入,显示器, USB 插孔等,让用户来和计算机进行交互,完成日常事务。但实际上:电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。

ActiveMQ—消息特性(延迟和定时消息投递)

ActiveMQ消息特性:延迟和定时消息投递(Delay and Schedule Message Delivery) 转自:http://blog.csdn.net/kimmking/article/details/8443872 有时候我们不希望消息马上被broker投递出去,而是想要消息60秒以后发给消费者,或者我们想让消息没隔一定时间投递一次,一共投递指定的次数。。。 类似

jenkins 插件执行shell命令时,提示“Command not found”处理方法

首先提示找不到“Command not found,可能我们第一反应是查看目标机器是否已支持该命令,不过如果相信能找到这里来的朋友估计遇到的跟我一样,其实目标机器是没有问题的通过一些远程工具执行shell命令是可以执行。奇怪的就是通过jenkinsSSH插件无法执行,经一番折腾各种搜索发现是jenkins没有加载/etc/profile导致。 【解决办法】: 需要在jenkins调用shell脚

哈希表的封装和位图

文章目录 2 封装2.1 基础框架2.2 迭代器(1)2.3 迭代器(2) 3. 位图3.1 问题引入3.2 左移和右移?3.3 位图的实现3.4 位图的题目3.5 位图的应用 2 封装 2.1 基础框架 文章 有了前面map和set封装的经验,容易写出下面的代码 // UnorderedSet.h#pragma once#include "HashTable.h"

封装MySQL操作时Where条件语句的组织

在对数据库进行封装的过程中,条件语句应该是相对难以处理的,毕竟条件语句太过于多样性。 条件语句大致分为以下几种: 1、单一条件,比如:where id = 1; 2、多个条件,相互间关系统一。比如:where id > 10 and age > 20 and score < 60; 3、多个条件,相互间关系不统一。比如:where (id > 10 OR age > 20) AND sco

Golang GUI入门——andlabs ui

官方不提供gui标准库,只好寻求第三方库。 https://github.com/google/gxui 这个gui库是谷歌内部人员提供的,并不是谷歌官方出品,现在停止维护,只好作罢。 第三方gui库 找了好多,也比较了好多,最终决定使用的是还是 https://github.com/andlabs/ui 相信golang gui还会发展的更好,期待更优秀的gui库 由于andlabs

Java消息队列:RabbitMQ与Kafka的集成与应用

Java消息队列:RabbitMQ与Kafka的集成与应用 大家好,我是微赚淘客返利系统3.0的小编,是个冬天不穿秋裤,天冷也要风度的程序猿! 在现代的分布式系统中,消息队列是实现系统间通信、解耦和提高可扩展性的重要组件。RabbitMQ和Kafka是两个广泛使用的消息队列系统,它们各有特点和优势。本文将介绍如何在Java应用中集成RabbitMQ和Kafka,并展示它们的应用场景。 消息队

Kafka 分布式消息系统详细介绍

Kafka 分布式消息系统 一、Kafka 概述1.1 Kafka 定义1.2 Kafka 设计目标1.3 Kafka 特点 二、Kafka 架构设计2.1 基本架构2.2 Topic 和 Partition2.3 消费者和消费者组2.4 Replica 副本 三、Kafka 分布式集群搭建3.1 下载解压3.1.1 上传解压 3.2 修改 Kafka 配置文件3.2.1 修改zookeep