摘要：以下是封裝的代碼用原生封裝一個(gè)組件隱藏的引用初始化設(shè)置，一個(gè)頁面有且僅有一個(gè)設(shè)置類名設(shè)置隱藏顯示文本內(nèi)容類型持續(xù)時(shí)間確保上一次的已被清空上一次的還未走完不能為空不存在成功圖標(biāo)錯(cuò)誤圖標(biāo)文字不傳的話默認(rèn)置引用為空隱藏如果存在清空引用

以下是封裝的代碼

/**
 * 用原生 JS 封裝一個(gè) Toast 組件
 */
var Toast = {
    // 隱藏的 setTimeOut 引用
    hideTimeOut: null,
    /**
     * 初始化
     */
    init: function () {
        var toastNode = document.createElement("section");
        toastNode.innerHTML = "111";
        toastNode.id = "toastWaka"; // 設(shè)置id，一個(gè)頁面有且僅有一個(gè)Toast
        toastNode.setAttribute("class", "toast");   // 設(shè)置類名
        toastNode.style.display = "none";   // 設(shè)置隱藏
        document.body.appendChild(toastNode);
    },
    /**
     * 顯示Toast
     * @param text 文本內(nèi)容
     * @param type 類型 success error
     * @param duration 持續(xù)時(shí)間
     */
    show: function (text, type, duration) {
        // 確保上一次的 TimeOut 已被清空
        if (this.hideTimeOut) {
            clearTimeout(this.hideTimeOut);
            this.hideTimeOut = null;
            // console.error("上一次的 TimeOut 還未走完!");
            // return;
        }
        if (!text) {
            console.error("text 不能為空!");
            return;
        }
        var domToastWaka = document.getElementById("toastWaka");
        console.log("domToastWaka", domToastWaka);
        if (!domToastWaka) {
            console.error("toastWaka DOM 不存在!");
            return;
        }
        var domIconSuccess = domToastWaka.querySelector(".icon-success");   // 成功圖標(biāo)
        var domIconError = domToastWaka.querySelector(".icon-error");   // 錯(cuò)誤圖標(biāo)
        var domToastText = domToastWaka.querySelector(".text");   // 文字
        domToastText.innerHTML = text || "";
        switch (type) {
            case "success":
                domIconSuccess.style.display = "inline-block";
                domIconError.style.display = "none";
                break;
            case "error":
                domIconSuccess.style.display = "none";
                domIconError.style.display = "inline-block";
                break;
            default:
                domIconSuccess.style.display = "none";
                domIconError.style.display = "none";
                break;
        }
        domToastWaka.style.display = "block";
        // 不傳的話默認(rèn)2s
        var that = this;
        this.hideTimeOut = setTimeout(function () {
            domToastWaka.style.display = "none";
            that.hideTimeOut = null;    // 置 TimeOut 引用為空
        }, duration || 2000);
    },
    /**
     * 隱藏 Toast
     */
    hide: function () {
        // 如果 TimeOut 存在
        if (this.hideTimeOut) {
            // 清空 TimeOut 引用
            clearTimeout(this.hideTimeOut);
            this.hideTimeOut = null;
        }
        var domToastWaka = document.getElementById("toastWaka");
        if (domToastWaka) {
            domToastWaka.style.display = "none";
            document.body.removeChild(domToastWaka);
        }
    }
};

css樣式設(shè)置

/*toast樣式*/
#toastWaka {
    position: absolute;
    display: none;
    left: 50%;
    bottom: 50%;
    z-index: 99999;
    margin: 0 auto;
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
    width: 120px;
    height:40px;
    line-height: 40px;
    border-radius: 5px;
    text-align: center;
    color: #fff;
    background-color: rgba(000,000,000,0.5);
}

#toastWaka .text{
    color: #fff;
    display: inline-block;
    font-size: 14px;
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
}

如何使用

    
    
        
    
    
    


    
    
        復(fù)制邀請(qǐng)碼