Electron学习第四章 Dialog弹框

Dialog弹框

dialog弹框的使用
主页出现2s后出现文件夹弹框
关闭项目窗口时弹出关闭项目文件确认弹框


文章目录

  • Dialog弹框
  • 一、dialog弹框的引入
  • 二、项目编写
    • 1.html页面
    • 2.main.js文件
    • 3.实现效果
  • 总结


一、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);
 })

Electron学习第四章 Dialog弹框_第1张图片
2、关闭窗口确认弹框

mainWindow.on("close",(e)=>{
    e.preventDefault();
    dialog.showMessageBox(mainWindow,{
      type: "warning",
      title: "关闭",
      message: "是否要关闭窗口",
      buttons:["取消","确定"],

    }).then((index)=>{
      if(index.response === 1){
        app.exit();
      }
    })
  })

Electron学习第四章 Dialog弹框_第2张图片

总结

dialog弹框多用于打开和保存文件、警报等的本机系统对话框。

你可能感兴趣的:(electron,前端,javascript)