自己实现一套tip

开发中很多比如alert,confirm等等原生的都是不符合设计要求的,需要自己写

思路有2中,一种是单例模式(只能弹出来一个框) ; 另一种是多例模式(能弹出来多个框,并依次关闭)

(1)单例模式

不困难,从下面myAlert方法中可以简单的看到

(2)多例模式

难点在能够不出差的情况下,依次删除掉弹出的多个框
这里使用了闭包(见toast方法)

export default {
    toast(text) {
        let close = (function() {
            let toastWrapper = document.createElement('div');
            toastWrapper.innerHTML = `<div style="width: 200px;height: auto;color: #ffffff;font-weight: 900;padding: 0px 10px;border-radius: 10px;display: flex;justify-content: center;align-items: center;position: fixed;left: 50%;bottom: 100px;margin-left: -100px;background: rgba(0, 0, 0, 0.7);">
                    <p>${text}</p>
                </div>`;
            document.body.appendChild(toastWrapper);

            function closeToast() {
                setTimeout(() => {
                    document.body.removeChild(toastWrapper);
                },2000);
            }

            return closeToast;
        })();
        close();
    },

    myAlert(title,tip,footerText,clickFN) {
        let myAlert = document.getElementById('shenTipMyAlert');
        if (!myAlert) {
            myAlert = document.createElement('div');
            myAlert.setAttribute('id','shenTipMyAlert');
        }
        myAlert.innerHTML = 
        `<div class="wrapper-shen-12345" style="background: rgba(0, 0, 0, 0.3);position: fixed;left: 0;right: 0;top: 0;bottom: 0;display: flex;justify-content: center;align-items: center;">
            <div class="content-shen-12345" style="width: 77%;height: 190px;background: #ffffff;border-radius: 5px;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;">
                <div class="body-shen-12345" style="width: 100%;height: 133px;display: flex;flex-direction: column;justify-content: center;align-items: center;">
                    <p class="title-shen-12345" style="color: #010101;font-size: 20px;font-weight: 900;line-height: 200%;margin: 0;padding: 0;">${title}</p>
                    <p class="tip-shen-12345" style="color: #9A9B9D;font-size: 14px;font-weight: 500;line-height: 200%;margin: 0;padding: 0;">${tip}~</p>
                </div>
                <a href="innersect://navigation?target=home" id="footer-shen-1234567890" class="footer-shen-12345" style="width: 100%;height: 57px;display: flex;justify-content: center;align-items: center;font-size: 14px;color: #2D2F3B;border-top: 1px solid #D8D8D8;text-decoration:none;">
                    <p>${footerText}</p>
                </a>
            </div>
        </div>`;
        document.body.appendChild(myAlert);
        document.getElementById('footer-shen-1234567890').addEventListener('click',(e) => {
            document.body.removeChild(myAlert);
            clickFN(e);
        });
    },

    // 开始之前的myAlert
    beforeStartMyAlert(fn) {
        this.myAlert('活动未开始','活动开始后再来逛逛吧~','知道了',fn);
    },
    // 结束之后的myAlert
    afterEndMyAlert(fn) {
        this.myAlert('活动已结束','下次记得来早点哦~','知道了',fn);
    },

    myConfirm() {

    }
}