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

以下是封裝的代碼

/**
 * 用原生 JS 封裝一個 Toast 組件
 */
var Toast = {
    // 隱藏的 setTimeOut 引用
    hideTimeOut: null,
    /**
     * 初始化
     */
    init: function () {
        var toastNode = document.createElement("section");
        toastNode.innerHTML = "111";
        toastNode.id = "toastWaka"; // 設(shè)置id，一個頁面有且僅有一個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ù)時間
     */
    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");   // 成功圖標
        var domIconError = domToastWaka.querySelector(".icon-error");   // 錯誤圖標
        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";
        // 不傳的話默認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ù)制邀請碼