vue-weui-expand/src/components/dialog/dialog.js

WeUI 的轻量级 js 封装

function confirm({title="",text,okTxt="确认",noTxt="取消",type=0}={},no,yes){
    let style='weui-skin_android';
    if(type==0){
        var ua = window.navigator.userAgent.toLowerCase();
        if(ua.match(/iphone/i) == 'iphone'){
            style='';
        }
    }else if(type!=1){
        style='';
    }
    let innerhtml=`<div class="weui-mask"></div><div class="weui-dialog ${style} "><div class="weui-dialog__hd"><strong class="weui-dialog__title">${title}</strong></div><div class="weui-dialog__bd">${text}</div><div class="weui-dialog__ft"><a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default">${noTxt}</a><a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">${okTxt}</a></div> </div>`;
    let newNode = window.document.createElement("div"); 
    newNode.id=Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
    newNode.className="js_dialog";
    newNode.innerHTML = innerhtml;    
    window.document.getElementsByTagName('body')[0].appendChild(newNode);


    window.document.getElementById(newNode.id).getElementsByTagName('a')[0].addEventListener('click', (e)=> { 
        window.document.getElementsByTagName('body')[0].removeChild( document.getElementById(newNode.id));
        if(no!=undefined){
            no();
        }
        e.preventDefault();
        e.stopPropagation();
    }, false);

    window.document.getElementById(newNode.id).getElementsByTagName('a')[1].addEventListener('click', (e)=> { 
        window.document.getElementsByTagName('body')[0].removeChild( document.getElementById(newNode.id));
        if(yes!=undefined){
            yes();
        }
        e.preventDefault();
        e.stopPropagation();
    }, false);
}
function alert({text,okTxt="确认",type=0}={},yes){
    let style='weui-skin_android';
    if(type==0){
        var ua = window.navigator.userAgent.toLowerCase();
        if(ua.match(/iphone/i) == 'iphone'){
            style='';
        }
    }else if(type!=1){
        style='';
    }
    let innerhtml=`<div class="weui-mask"></div><div class="weui-dialog ${style}"><div class="weui-dialog__bd">${text}</div><div class="weui-dialog__ft"><a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary">${okTxt}</a></div></div>`;
    let newNode = window.document.createElement("div"); 
    newNode.id=Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
    newNode.className="js_dialog";
    newNode.innerHTML = innerhtml;    
    window.document.getElementsByTagName('body')[0].appendChild(newNode);

    window.document.getElementById(newNode.id).getElementsByTagName('a')[0].addEventListener('click', (e)=> { 
        window.document.getElementsByTagName('body')[0].removeChild( document.getElementById(newNode.id));
        if(yes!=undefined){
            yes();
        }
        e.preventDefault();
        e.stopPropagation();
    }, false);
}
function install(Vue){
    Vue.prototype.dialog={
        confirm,
        alert
     };
 }

export {install,confirm, alert}