electron dialog.showMessageBox的使用案例

 更新时间:2023年08月10日 10:08:46   作者:xjhqre  
Electron Dialog 模块提供了api来展示原生的系统对话框,本文主要介绍了electron dialog.showMessageBox的使用案例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

electron 版本:25.3.1

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';"/>
</head>
<body>
<h1>Hello World!</h1>
<button id="sad">点我弹出消息对话框</button>
<script>
    const {ipcRenderer} = require('electron')
    document.querySelector('#sad').addEventListener('click', () => {
        ipcRenderer.send('open-message-dialog')
    })
</script>
</body>
</html>

main.js

const {app, BrowserWindow, ipcMain, dialog} = require('electron')
function createWindow() {
    let win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false
        }
    })
    win.loadFile('index.html')
    ipcMain.on('open-message-dialog', () => {
        dialog.showMessageBox({
            title: '消息',
            message: '这是一个消息框。',
            type: 'info',
            buttons: ['确定', '取消']
        })
    })
}
app.whenReady().then(createWindow)
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})
app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

效果展示

到此这篇关于electron dialog.showMessageBox的使用案例的文章就介绍到这了,更多相关electron dialog.showMessageBox内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

相关文章

  • vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

    vue-cli 3.0 自定义vue.config.js文件,多页构建的方法

    今天小编就为大家分享一篇vue-cli 3.0 自定义vue.config.js文件,多页构建的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • VUE中路由变化this.$router(push\replace\go\back)解读

    VUE中路由变化this.$router(push\replace\go\back)解读

    这篇文章主要介绍了VUE中路由变化this.$router(push\replace\go\back),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • VUE3+TS递归组件实现TreeList设计实例详解

    VUE3+TS递归组件实现TreeList设计实例详解

    这篇文章主要为大家介绍了VUE3+TS递归组件实现TreeList设计实例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-09-09
  • 如何管理Vue中的缓存页面

    如何管理Vue中的缓存页面

    这篇文章主要介绍了如何管理Vue中的缓存页面,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-02-02
  • vue+element实现下拉菜单并带本地搜索功能示例详解

    vue+element实现下拉菜单并带本地搜索功能示例详解

    这篇文章主要介绍了vue+element实现下拉菜单并带本地搜索功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-09-09
  • 基于vue3和element plus实现甘特图

    基于vue3和element plus实现甘特图

    甘特图是一种重要的项目管理工具,它可以通过图形化的方式展示项目的进度和时间表,甘特图通常由一个横轴和一个纵轴组成,甘特图对于项目管理非常重要,所以本文给大家介绍了如何基于vue3和element plus实现甘特图,需要的朋友可以参考下
    2024-06-06
  • VUE项目中调用高德地图的全流程讲解

    VUE项目中调用高德地图的全流程讲解

    这篇文章主要介绍了VUE项目中调用高德地图的全流程讲解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue3中watchEffect和watch的基础应用详解

    Vue3中watchEffect和watch的基础应用详解

    watch是一个侦听器,默认是懒侦听的,即仅在侦听源发生变化时才执行回调函数,watchEffect是会自动收集函数里面变量的响应式依赖,本文主要来讲讲二者的区别,感兴趣的可以了解一下
    2023-07-07
  • Vue ElementUI table实现双击修改编辑某个内容的方法

    Vue ElementUI table实现双击修改编辑某个内容的方法

    在实现表格单元格双击编辑功能时,需使用@cell-dblclick事件来触发双击操作,将单元格切换为input输入框,通过ref引用和绑定失焦及回车事件来确认编辑,同时,需要处理编辑数据的更新和方法逻辑的完善
    2024-09-09
  • vue前端HbuliderEslint实时校验自动修复设置

    vue前端HbuliderEslint实时校验自动修复设置

    这篇文章主要为大家介绍了vue前端中Hbulider中Eslint实时校验自动修复设置操作过程,有需要的朋友可以借鉴参考下希望能够有所帮助
    2021-10-10

最新评论