• 欢迎光临~

electron在远程页面中调用自定义的confirm

开发技术 开发技术 2022-10-18 次浏览

1.自定义confirm,使用elementui的默认弹出框,只用样式。

<div tabindex="-1"role="dialog"aria-modal="true"aria-label="提示"class="el-message-box__wrapper"style="z-index: 2024;"><div class="el-message-box confirm-dialog--ew"><div class="el-message-box__header"><div class="el-message-box__title"><span>提示</span></div><button type="button"aria-label="Close" onclick="window._myclose(false);"  class="el-message-box__headerbtn"><i class="el-message-box__close el-icon-close"></i></button></div><div class="el-message-box__content"><div class="el-message-box__container"><div class="el-message-box__status el-icon-warning"></div><div class="el-message-box__message"><p>报告发生变化,是否保存?</p></div></div><div class="el-message-box__input"style="display: none;"><div class="el-input"><input type="text"autocomplete="off"placeholder=""class="el-input__inner"></div><div class="el-message-box__errormsg"style="visibility: hidden;"></div></div></div><div class="el-message-box__btns"><button type="button"class="el-button el-button--default el-button--small" onclick="window._myclose(false);"><span>取消</span></button><button type="button" onclick="window._myclose(true);" class="el-button el-button--default el-button--small el-button--primary "><span>确定</span></button></div></div></div><div class="v-modal"tabindex="0"style="z-index: 2023;"></div>

 

2.生成js

var win =new function(){ 
//方法必须是注册到window下不然在html加载时候无法识别
  window.win_close = function () {
        let wiframe = window.document.querySelector('.win iframe');
        let winn = window.document.querySelector('.win');
        if (wiframe != null && wiframe != undefined) {
            wiframe.remove();
        }
        if (winn != null && winn != undefined) {
            winn.remove();
        }
    };
  
   window.win_isFunction = function (v) {
        return typeof (v) == "function"
    }
 // 显示消息框
    function messageBox(html, title, message) { 
      window.document.querySelector('.el-message-box__title span').innerHTML=title;
        var contet=window.document.querySelector('.el-message-box__message p');
        contet.innerHTML= message.replace('rn', '<br/>');
    }

// 确认框 this.confirm = function (title, message, selected) { window._myclose = function (r) { window.win_close(); if (window.win_isFunction(selected)) selected(r); }; window.win_close(); var confirmWrap = window.document.createElement("div"); confirmWrap.classList.add('win'); var html='<div tabindex="-1"role="dialog"aria-modal="true"aria-label="提示"class="el-message-box__wrapper"style="z-index: 2024;"><div class="el-message-box confirm-dialog--ew"><div class="el-message-box__header"><div class="el-message-box__title"><span>提示</span></div><button type="button"aria-label="Close" onclick="window._myclose(false);" class="el-message-box__headerbtn"><i class="el-message-box__close el-icon-close"></i></button></div><div class="el-message-box__content"><div class="el-message-box__container"><div class="el-message-box__status el-icon-warning"></div><div class="el-message-box__message"><p>报告发生变化,是否保存?</p></div></div><div class="el-message-box__input"style="display: none;"><div class="el-input"><input type="text"autocomplete="off"placeholder=""class="el-input__inner"></div><div class="el-message-box__errormsg"style="visibility: hidden;"></div></div></div><div class="el-message-box__btns"><button type="button"class="el-button el-button--default el-button--small" onclick="window._myclose(false);"><span>取消</span></button><button type="button" onclick="window._myclose(true);" class="el-button el-button--default el-button--small el-button--primary "><span>确定</span></button></div></div></div><div class="v-modal"tabindex="0"style="z-index: 2023;"></div>' confirmWrap.innerHTML = html; window.document.body.appendChild(confirmWrap); messageBox(html, title, message); };
}

3.使用方法

window.onload = function () {
    win.confirm('系统提示', '系统不会保存您所做的更改,还要继续刷新页面?', (r) => { 
                        if (r == true) {
                            window.location.reload();
                        }
                    }) 
}

 

程序员灯塔
转载请注明原文链接:electron在远程页面中调用自定义的confirm
喜欢 (0)