12. Electron 消息对话框功能的实现
在之前的章节中我们已经学了打开文件对话框和保存文件对话框知识,本文就学习一下最为普通的消息对话框dialog.showMessageBox()
,它的属性还是比较多的,所以我们先来看一下它的相关属性。
showMessageBox 相关属性
它有太多的属性,这里我们也只挑一些常用的属性来讲解,如果你在工作中具体使用,可以先到官网查询相关的 API 后,再根据需求具体使用。
type
: String 类型,可以选,图标样式,有none
、info
、error
、question
和warning
title
: String 类型,弹出框的标题messsage
: String 类型,必选 message box 的内容,这个是必须要写的buttons
: 数组类型,在案例中我会详细的讲解,返回的是一个索引数值(下标)
制作一个确认对话框
先在index4.html
中增加一个按钮。
<button id="messageBtn">弹出对话框</button>
然后这个对话框的内容也非常简单,就是简单的弹出一句话,用户可以点击“确定”或者“取消”。代码如下:
var messageBtn = document.querySelector('#messageBtn'); messageBtn.onclick = function () { dialog.showMessageBox({ type: 'warning', title: '请做出你的选择', message: '是不是要跟码云笔记去做大宝剑?', buttons: ['yes','no'] }).then(result => { console.log(result) }).catch(err =>{ console.log(err) }) }
写完这一步就可以在终端中输入electron .
来打开应用,进行预览了。
可以看到回调中result
里有一个response
,这里是给我们返回按钮的数组下标。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 12. Electron 消息对话框功能的实现
码云笔记 » 12. Electron 消息对话框功能的实现