mintui-toast/lib/index.js

mintui toast Condensed version

import './stylus/mintui-toast.styl'
import { addClass,removeClass } from './js/dom'
let body = document.getElementsByTagName('body')[0];

// 提示框
function Toast(msg){
    if(typeof msg === 'object'){
        setMsg(msg.message || '',msg.duration || 0)
    }else if(typeof msg === 'string'){
        setMsg(msg)
    }
    function setMsg(message,duration){
        var toastElement = document.getElementsByClassName('my-mint-toast')[0]
        if(toastElement){
            toastElement.innerHTML = message
            removeClass('my-mint-toast','none')
            addClass(toastElement,'my-is-placemiddle')
        }else{
            var toastElement = document.createElement("div");
            toastElement.innerHTML = message
            addClass(toastElement,'my-mint-toast')
            body.appendChild(toastElement)
            setTimeout(()=>{
                addClass(toastElement,'my-is-placemiddle')
        },1)
        }
        setTimeout(()=>{
            removeClass('my-mint-toast','my-is-placemiddle')
        setTimeout(()=>{
            toastElement.innerHTML = '';
        addClass(toastElement,'none')
    },300)
    },duration || 1500)
    }
}
// 确认框
class messageBox {
    constructor (){

    }
    confirm(message){
        this.createMessageBox(message);
        let $this = this;
        return new Promise((resolve,reject)=>{
                document.getElementsByClassName('mint-msgbox-cancel')[0].onclick = function(){
                reject('cancel')
                $this.hideMessageBox();
            }
            document.getElementsByClassName('mint-msgbox-confirm')[0].onclick = function(){
                resolve('confirm')
                $this.hideMessageBox();
            }
        })
    }
    hideMessageBox(){
        addClass(document.getElementsByClassName('mint-msgbox')[0],'leave')
        addClass(document.getElementsByClassName('v-modal')[0],'v-modal-leave')
        removeClass('v-modal','v-modal-enter')

        setTimeout(()=>{
            addClass(document.getElementsByClassName('v-modal')[0],'none')
        addClass(document.getElementsByClassName('mint-msgbox')[0],'none')
    },300)
    }
    createMessageBox(message){
        let messageBoxTable = `<div class="mint-msgbox-wrapper" style="position: absolute; z-index: 2001;"><div class="mint-msgbox"><div class="mint-msgbox-header"><div class="mint-msgbox-title">提示</div></div> <div class="mint-msgbox-content"><div class="mint-msgbox-message">${message}</div> <div class="mint-msgbox-input" style="display: none;"><input placeholder="" type="text"> <div class="mint-msgbox-errormsg" style="visibility: hidden;"></div></div></div> <div class="mint-msgbox-btns"><button class="mint-msgbox-btn mint-msgbox-cancel">取消</button> <button class="mint-msgbox-btn mint-msgbox-confirm">确定</button></div></div></div>
      <div class="v-modal" style="z-index: 2000;"></div>`
        var messageBoxElement = document.createElement("div");
        messageBoxElement.innerHTML = messageBoxTable
        body.appendChild(messageBoxElement)
        addClass(document.getElementsByClassName('v-modal')[0],'v-modal-enter')
        addClass(document.getElementsByClassName('mint-msgbox')[0],'enter')
    }
}

var MessageBox = new messageBox()
// module.exports.Toast = Toast
// module.exports.MessageBox = MessageBox
window.addEventListener('popstate', function() {// 前进后退触发
    if(document.getElementsByClassName('v-modal')){
        MessageBox.hideMessageBox();
    }
});


export { Toast,MessageBox }