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

WeUI 的轻量级 js 封装

function success({text='已完成',mask=false,close,time}={}){
    let maskStyle=mask==true?'weui-mask':'weui-mask_transparent';
    let innerhtml=`<div class="${maskStyle}"></div><div class="weui-toast"><i class="weui-icon-success-no-circle weui-icon_toast"></i><p class="weui-toast__content">${text}</p></div>`;
    let newNode = window.document.createElement("div"); 
    newNode.id=Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
    newNode.innerHTML = innerhtml;    
    window.document.getElementsByTagName('body')[0].appendChild(newNode);
    if(time!=undefined){
        window.setTimeout(()=>{
            let doc= window.document.getElementById(newNode.id);
             window.document.getElementsByTagName('body')[0].removeChild(doc);
             if(close!=undefined){
                 close();
             }
        },time*1000);
    }
    let funClose=close;
    return {
        close(){
           let doc= window.document.getElementById(newNode.id);
           window.document.getElementsByTagName('body')[0].removeChild(doc);
           if(funClose!=undefined){
            funClose();
           }
        }
    };
}

function fail({text='失败',mask=false,close,time}={}){
    let maskStyle=mask==true?'weui-mask':'weui-mask_transparent';
    let innerhtml=`<div class="${maskStyle}"></div><div class="weui-toast"><i class="weui-icon-warn weui-icon_toast" style="font-size:60px;"></i><p class="weui-toast__content">${text}</p></div>`;
    let newNode = window.document.createElement("div"); 
    newNode.id=Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
    newNode.innerHTML = innerhtml;    
    window.document.getElementsByTagName('body')[0].appendChild(newNode);
    if(time!=undefined){
        window.setTimeout(()=>{
            let doc= window.document.getElementById(newNode.id);
             window.document.getElementsByTagName('body')[0].removeChild(doc);
             if(close!=undefined){
                 close();
             }
        },time*1000);
    }
    let funClose=close;
    return {
        close(){
           let doc= window.document.getElementById(newNode.id);
           window.document.getElementsByTagName('body')[0].removeChild(doc);
           if(funClose!=undefined){
            funClose();
           }
        }
    };
}
function msg(arg){
    let {text,close,time=3}=typeof(arg)=='object'?arg:{text:arg};
    let innerhtml=`<div class="weui-mask_transparent"></div><div class="weui-toast" style="min-height: initial;line-height: 1.2;padding:12px 11px;font-size: 12px; width: max-content;left: 0;right: 0; max-width: 80%;margin-left: auto; margin-right: auto;">${text}</div>`;
    let newNode = window.document.createElement("div"); 
    newNode.id=Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
    newNode.innerHTML = innerhtml;    
    window.document.getElementsByTagName('body')[0].appendChild(newNode);
    if(time!=undefined){
        window.setTimeout(()=>{
            let doc= window.document.getElementById(newNode.id);
             window.document.getElementsByTagName('body')[0].removeChild(doc);
             if(close!=undefined){
                 close();
             }
        },time*1000);
    }
    let funClose=close;
    return {
        close(){
           let doc= window.document.getElementById(newNode.id);
           window.document.getElementsByTagName('body')[0].removeChild(doc);
           if(funClose!=undefined){
            funClose();
           }
        }
    };
}
function loading({text='处里中...',mask=false,close,time}={}){
    let maskStyle=mask==true?'weui-mask':'weui-mask_transparent';
    let innerhtml=`<div class="${maskStyle}"></div><div class="weui-toast"><i class="weui-loading weui-icon_toast" ></i><p class="weui-toast__content">${text}</p></div>`;
    let newNode = window.document.createElement("div"); 
    newNode.id=Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
    newNode.innerHTML = innerhtml;    
    window.document.getElementsByTagName('body')[0].appendChild(newNode);
    if(time!=undefined){
        window.setTimeout(()=>{
            let doc= window.document.getElementById(newNode.id);
             window.document.getElementsByTagName('body')[0].removeChild(doc);
             if(close!=undefined){
                 close();
             }
        },time*1000);
    }
    let funClose=close;
    return {
        close(){
           let doc= window.document.getElementById(newNode.id);
           window.document.getElementsByTagName('body')[0].removeChild(doc);
           if(funClose!=undefined){
            funClose();
           }
        }
    };
}
function customize({text,time,icon,close,mask=false,styleClass}={}){
    let maskStyle=mask==true?'weui-mask':'weui-mask_transparent';
    let innerhtml=`<div class="${maskStyle}"></div><div class="weui-toast"><i class="${icon} weui-icon_toast"></i><p class="weui-toast__content">${text}</p></div>`;
    let newNode = window.document.createElement("div"); 
    newNode.className=styleClass;
    newNode.id=Number(Math.random().toString().substr(3,length) + Date.now()).toString(36);
    newNode.innerHTML = innerhtml;    

    window.document.getElementsByTagName('body')[0].appendChild(newNode);
    if(time!=undefined){
        window.setTimeout(()=>{
            let doc= window.document.getElementById(newNode.id);
             window.document.getElementsByTagName('body')[0].removeChild(doc);
             if(close!=undefined){
                 close();
             }
        },time*1000);
    }
    let funClose=close;
    return {
        close(){
           let doc= window.document.getElementById(newNode.id);
           window.document.getElementsByTagName('body')[0].removeChild(doc);
           if(funClose!=undefined){
            funClose();
           }
        }
    };
}

function install(Vue){
   Vue.prototype.toast={
        success,
        fail,
        msg,
        loading,
        customize
    };
}

export {
    install,
    success,
    fail,
    msg,
    loading,
    customize

}