前端学习之路Electron——弹出框

最新推荐文章于 2024-04-08 09:21:28 发布

HarryHY

最新推荐文章于 2024-04-08 09:21:28 发布

阅读量2.7k

点赞数

分类专栏： # Electron

本文链接：https://blog.csdn.net/HarryHY/article/details/105893372

版权

Electron 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

html部分

    <div id="msgbtn">
        msgbtn
    </div>

JS部分：

dialog.showMessageBox({
                type:'warning',
                title:'喜欢哪一个？',
                message:'喜欢迪丽热巴还是古力娜扎',
                buttons:['迪丽热巴','古力娜扎']
            }).then(res=>{
                console.log(res.response)
            })

		let msgbtn = document.querySelector('#msgbtn');
        msgbtn.onclick = function(e){
            dialog.showMessageBox({
                type:'warning',
                title:'喜欢哪一个？',
                message:'喜欢迪丽热巴还是古力娜扎',
                buttons:['迪丽热巴','古力娜扎']
            }).then(res=>{
                console.log(res.response)
            })
        }

全部

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- <button id="btn">
        打开新的窗口
    </button>
    <div>

    </div> -->
    <a id="aHref" href="https://www.baidu.com/">打开外部链接</a>
    <div id="myweb">
        open myweb
    </div>
    <div id='fatview'>

    </div>
    <div id="opentext">
        opentext
    </div>
    <div id="savetxt">
        savetxt
    </div>
    <div id="msgbtn">
        msgbtn
    </div>
    <img src="" alt="" id="openimg" style="width:100%">
    <script src="./render/openweb.js"></script>
    <script>
        const {
            dialog
        } = require('electron').remote
        const fs = require('fs')
        let opentext = document.querySelector('#opentext');
        let savetxt = document.querySelector('#savetxt');
        let msgbtn = document.querySelector('#msgbtn');
        opentext.onclick = function(e){
            dialog.showOpenDialog({
                title:'请选择你的文件',
                defaultPath:'',//默认打开的文件路径选择
                filters:[{ //过滤掉你不需要的文件格式
                    name:'image',
                    extensions:['jpg','png']
                }],
                buttonLabel:'发送表情包'
            }).then(res=>{
                let openimg = document.querySelector('#openimg');
                openimg.setAttribute('src',res.filePaths[0])
            }).catch(req=>{
                console.log(req)
            })
        }
        savetxt.onclick = function(e){
            dialog.showSaveDialog({
                title:'保存文件',
            }).then((res)=>{
                console.log(res)
                fs.writeFileSync(res.filePaths,'好好学习天天向上')
            }).catch((req)=>{
                console.log(req)
            })
        }
        msgbtn.onclick = function(e){
            dialog.showMessageBox({
                type:'warning',
                title:'喜欢哪一个？',
                message:'喜欢迪丽热巴还是古力娜扎',
                buttons:['迪丽热巴','古力娜扎']
            }).then(res=>{
                console.log(res.response)
            })
        }
    </script>
</body>

</html>

在这里插入图片描述

当type 为 none时

type:'none',

在这里插入图片描述

当type 为 info时

type:'info',

在这里插入图片描述

当type 为 question时

type:'question',

在这里插入图片描述

全部的api

options Object
type String (可选) - 可以为 "none", "info", "error", "question" 或者 "warning". 在 Windows 上, "question" 与"info"显示相同的图标, 除非你使用了 "icon" 选项设置图标。 在 macOS 上, "warning" 和 "error" 显示相同的警告图标
buttons String[] (可选) - 按钮的文本数组。在 Windows 上, 空数组在按钮上会显示 "OK".
defaultId Integer (可选) - 在 message box 对话框打开的时候，设置默认选中的按钮，值为在 buttons 数组中的索引.
title String (可选) - message box 的标题，一些平台不显示.
message String - message box 的内容.
detail String (可选) - 额外信息.
checkboxLabel String (optional) - If provided, the message box will include a checkbox with the given label.
checkboxChecked Boolean (可选) - checkbox 的初始值，默认值为 false.
icon NativeImage (可选)
cancelId Integer (可选) - 用于取消对话框的按钮的索引，例如 Esc 键. By default this is assigned to the first button with "cancel" or "no" as the label. 默认情况下，它被分配给第一个按钮，文字为 “cancel” 或 “no”。 If no such labeled buttons exist and this option is not set, 0 will be used as the return value.
noLink Boolean (可选) - 在Windows上，应用将尝试找出哪个 buttons 是常用按钮(例如 "Cancel" 或 "Yes")，然后在对话框中以链接命令的方式展现其它的按钮。 这可以使对话框以现代Windows应用程序的风格显示。 如果你不喜欢这个行为, 你可以设置 noLink 为 true.
normalizeAccessKeys Boolean (可选) -规范跨平台的键盘访问键。 默认值为 false. 用 & 连接和转换键盘访问键, 以便它们在每个平台上正常工作.& 字符会在macOS上被删除，在 Linux 上会被转换为 _，在 Windows 上保持不变。 例如 Vie&w 的按钮标签在 Linux 上会被转换为 Vie_w，在 macOS 转换为 View 并且可以被选择。而Windows和Linux上表示 Alt-W 。