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

说明

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

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

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

代码

效果图
源码

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

javascript 复制代码
// 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组件中直接引用:

javascript 复制代码
import { useMessage } from "@/hooks/useMessage";
const message = useMessage()
message.confirm('马云想你转账500万,是否接收?')
相关推荐
程序员爱技术43 分钟前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js