Electron 调用系统弹出框-Electron dialog

Electron 调用系统弹出框-Electron dialog教程: https://www.itying.com/goods-929.html

Electron Dialog 模块提供了api来展示原生的系统对话框,例如打开文件框,alert框,所以web应用可以给用户带来跟系统应用相同的体验。

1.png


var {remote}=require('electron');

remote.dialog.showErrorBox('title','content');

2.png


var {remote}=require('electron');

remote.dialog.showMessageBox({
    type:'info',
    title: 'message',
    message: 'hello',
    buttons:['ok','cancel']
},(index) => {
    if ( index == 0 ) {
        console.log('You click ok.');
    } else {
        console.log('You click cancel');
    }
})


3.png

dialog.showOpenDialog({
    properties:['openFile','openDirectory']
}, (files) => {
    console.log(files);
})

完整代码:

var {remote}=require('electron');


//https://electronjs.org/docs/api/dialog
var errorDom=document.querySelector('#error');

var mesageBoxDom=document.querySelector('#mesageBox');


var openDialogDom=document.querySelector('#openDialog');

var saveDialogDom=document.querySelector('#saveDialog');


errorDom.onclick=function(){ 
    remote.dialog.showErrorBox('警告','操作有误');

}

mesageBoxDom.onclick=function(){
    remote.dialog.showMessageBox({
        type:'info',
        title:'提示信息',
        message:'内容',
        buttons:['ok','no']

    },function(index){

        console.log(index)
    })


}

openDialogDom.onclick=function(){


        remote.dialog.showOpenDialog({

            // properties:['openDirectory','openFile']

            properties:['openFile']

        },function(data){


                console.log(data);

                //["C:\Users\Administrator\Desktop\新建文件夹\js\index.js"]
        })

}

saveDialogDom.onclick=function(){


    remote.dialog.showSaveDialog({

        title:'save file',
        defaultPath:"aaa.jpg",
        filters: [
            {name: 'Images', extensions: ['jpg', 'png', 'gif']},
            {name: 'Movies', extensions: ['mkv', 'avi', 'mp4']},
            {name: 'Custom File Type', extensions: ['as']},
            {name: 'All Files', extensions: ['*']}
          ]

    },function(path){
        console.log(path);

        // C:\Users\Administrator\Desktop\新建文件夹\js\aaa.jpg

        //保存以后会打印保存的路径  , 但是不会实现真的保存功能  (具体保存什么数据可以写在nodejs里面)
    })
}


回到顶部