Electron dialog 弹出框

dialog 模块提供了 api 来展示原生的系统对话框，例如打开文件框，alert 框，
所以 web 应用可以给用户带来跟系统应用相同的体验。
dialog.js
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里面）
    })
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  

  <button id="error">失败提示框</button>

  <br>  
  <br>  

  <button id="mesageBox">showMessageBox</button>

  <br>  
  <br>  

  <button id="openDialog">showOpenDialog</button>

  
  <br>  
  <br>  

  <button id="saveDialog">showSaveDialog</button>


  <script src="renderer/dialog.js"></script>

</body>
</html>

 

posted on 2020-12-30 10:17  LoaderMan  阅读(4674)  评论(0)  编辑  收藏  举报

导航