electron 弹出框

旧城等待， 2021-07-24 19:25 1098阅读 0赞

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  选择按钮的索引});

[文档][Link 1]

代码示例:

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

[Link 1]: https://www.electronjs.org/docs/api/dialog