Electron消息对话框

xiaohai 2021-05-17 21:02:39 3926人围观 标签: Electron 
简介普通的消息对话框dialog.showMessageBox()
showMessageBox 相关属性

它有太多的属性,这里我们也只挑一些常用的属性来讲解,如果你在工作中具体使用,可以先到官网查询相关的API后,再根据需求具体使用。

  • type :String类型,可以选,图标样式,有none、info、error、question和warning
  • title: String类型,弹出框的标题
  • messsage : String 类型,必选 message box 的内容,这个是必须要写的
  • buttons: 数组类型,在案例中我会详细的讲解,返回的是一个索引数值(下标)

页面新增:

<button id="msgBtn">消息提示</button>

在渲染进程中添加如下代码:

const { remote } = require('electron')

window.onload = function () {

    var msgBtn = document.querySelector('#msgBtn')
    msgBtn.onclick = function (e) {
        remote.dialog.showMessageBox({
            type: 'question',
            title: '标题',
            message: '提示内容',
            buttons: ['确定', '取消']
        }).then((index) => {

            if (index.response === 0) {
                console.log('点击了确定按钮')
            } else {
                console.log('点击了取消按钮')
            }
        })
    }
}

运行效果:


图片alt