electron 弹出框

1、引入弹出框
	主线程:const {dialog}=require('electron');
	渲染进程:const {dialog}=require('electron').remote;
	
2、每个弹出框都有同步和异步打开方式
	是否在末尾添加Sync
	同步:可以直接接收返回值
	异步:弹出框为promise对象,.then或await获取,参数为内容对象

(1)文件选择框

	dialog.showOpenDialog(基于谁的窗口对象(可选),{
		propertyies:['如下参数来设置这个弹框的作用,可设置多个']
		    openFile - 允许选择文件
		    openDirectory - 允许选择文件夹
		    multiSelections-允许多选。
		    showHiddenFiles-显示对话框中的隐藏文件。
		    createDirectory macOS - 允许在对话框中创建新的目录。
		    promptToCreate Windows - 如果对话框中输入的文件路径不存在，则提示创建. 这并不是真的在路径上创建一个文件，而是允许返回一些不存在的地址交由应用程序去创建。
		    noResolveAliases macOS - 禁用自动别名(符号链接)路径解析。选择的别名现在将返回别名路径，而不是它们的目标路径。
		    treatPackageAsDirectory macOS - 将包(如.app文件夹)视为目录而不是文件。
		    dontAddToRecent Windows - 不要将打开的项目添加到“最近文档”列表中。

			 
        title:'标题',
        buttonLabel:"",  右下角第一个按钮的文本内容
        
        filters: [  过滤器,可设置多个指定类型文件   
			{name:'描述信息',extensions:['后缀名','后缀名2',...]},
			...
          ]
    }).then((res)=>{res.filePath 返回文件路径});

(2)保存文件弹框

	dialog.showSaveDialog(基于谁的窗口对象(可选),{
        title:'保存',
        buttonLabel:'确认保存',
        filters: [    文件选择过滤器
            { name: 'Images', extensions: ['jpg', 'png', 'gif'] },
            { name: 'jiaoben', extensions: ['js'] },
            { name: 'All Files', extensions: ['*'] }
          ]
	}).then(res=>{res.filePath  文件保存路径});

(3)原生alert弹框的扩展弹框,可定制更多内容
	  
	dialog.showMessageBox(基于谁的窗口对象(可选),{
        type:'warning',  弹出框类型
        title:'弹出框标题',
        message:'弹出框内容',
        detail:'弹出框附加内容,字体大小小一号',
        buttons:['按钮名字1','按钮名字2','按钮名字3'],
    }).then(res=>{res.response  选择按钮的索引}); 

文档

代码示例:

const {
     dialog}=require('electron').remote;

var view=document.querySelector('.wb');
var sp=document.querySelector('.sp');
var btn=document.querySelector('.obtn');
var gbtn=document.querySelector('.gbtn');
var cbtn=document.querySelector('.cbtn');
var dbtn=document.querySelector('.dbtn');

var proxy;

btn.onclick=function(){
     
    //同步方式,直接返回,返回值为文件路径
    let res=dialog.showOpenDialogSync({
     
        title:'请选择文件',
        buttonLabel:"走你", //右下角第一个按钮的文本内容
        filters: [  //可以选择的文件后缀名
            {
      name: 'Images', extensions: ['jpg', 'png', 'gif'] },
            {
      name: 'jiaoben', extensions: ['js'] },
            // { name: 'All Files', extensions: ['*'] }
          ]
    })

    alert(res);
}

gbtn.onclick=function(){
     
    //异步为promise对象,回调参数为对象,包含选中的内容
    dialog.showOpenDialog({
     
        title:'请选择文件2',
        buttonLabel:"走我", //右下角第一个按钮的文本内容
        filters: [  //name为描述,extensions可以选择的文件后缀名
            {
      name: 'Images', extensions: ['jpg', 'png', 'gif'] },
            {
      name: 'jiaoben', extensions: ['js'] },
            {
      name: 'All Files', extensions: ['*'] }
          ]
    }).then((res)=>console.log(res.filePath));
}

cbtn.onclick=function()
{
     
    //保存弹窗,回调参数为保存的文件对象
    dialog.showSaveDialog({
     
        title:'保存',
        buttonLabel:'确认保存',
        filters: [  //可以选择的文件后缀名
            {
      name: 'Images', extensions: ['jpg', 'png', 'gif'] },
            {
      name: 'jiaoben', extensions: ['js'] },
            {
      name: 'All Files', extensions: ['*'] }
          ]
    }).then(res=>console.log(res.filePath));
}

dbtn.onclick=function()
{
     
    //回调参数为选中的按钮的索引
    dialog.showMessageBox({
     
        type:'warning', //弹出框类型
        title:'sure?',
        message:'jeff最帅',
        detail:'帅啊啊啊',
        buttons:['确定1','确定2','确定3'],


    }).then(res=>console.log(res)); 
}