Dialog弹框
dialog弹框的使用
主页出现2s后出现文件夹弹框
关闭项目窗口时弹出关闭项目文件确认弹框
一、dialog弹框的引入
const {dialog} = require('electron');
示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。
二、项目编写
1.html页面
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
</body>
</html>
2.main.js文件
代码如下（示例）：
// 打开弹窗，头部配置 dialog
const { app, BrowserWindow, dialog} = require('electron');
const path = require('path');
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit();
}
const createWindow = () => {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
mainWindow.loadFile(path.join(__dirname, 'index.html'));
mainWindow.webContents.openDevTools();
// 2s 后弹出一个弹框
setTimeout(()=>{
// openfile 允许选择文件
// openDirectory 允许选择文件夹
// multiSelection 允许多选
// showHiddenFiles 显示隐藏文件
// createDirectory 允许创建文件夹
dialog.showOpenDialog({
properties:["openfile",'multiSelections']
}).then((results)=>{
console.log(results.filePaths);
console.log(results.canceled);
})
},2000);
// 关闭窗口弹框确认
mainWindow.on("close",(e)=>{
e.preventDefault();
dialog.showMessageBox(mainWindow,{
type: "warning",
title: "关闭",
message: "是否要关闭窗口",
buttons:["取消","确定"],
}).then((index)=>{
if(index.response === 1){
app.exit();
}
})
})
};
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
3.实现效果
1、打开文件夹
dialog.showOpenDialog({
properties:["openfile",'multiSelections']
}).then((results)=>{
console.log(results.filePaths);
console.log(results.canceled);
})
2、关闭窗口确认弹框
mainWindow.on("close",(e)=>{
e.preventDefault();
dialog.showMessageBox(mainWindow,{
type: "warning",
title: "关闭",
message: "是否要关闭窗口",
buttons:["取消","确定"],
}).then((index)=>{
if(index.response === 1){
app.exit();
}
})
})
