原生JS封装 toast 弹层，自动关闭

由于公司业务需求，要一个公共toast ,下面是自己封装的一个。

css:

.toast {
        text-align: center;
        min-height: 70px;
        width: 220px;
        color: #e6e6e6;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.7);
        position: fixed;
        left: 43%;
        top: 40%;
}

.toast-icon {
    padding-top: 10px;
    padding-bottom: 10px;
}

.toast-tip {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}

js:

/*
 * @Author: liguowei
 * @Date:   2019-04-08 10:25:42
 * @Last Modified by:   liguowei01
 * @Last Modified time: 2019-04-08 11:17:17
 */
function toast(){};
toast.prototype = {
    init:function(){
        this.loadCss()
    },
    iconObj : {
        right:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAmCAYAAACoPemuAAADIElEQVRYR+2XT0jUQRTH3/e3u0YSYSDuzgwUCOHBS4e6BJmEEfRfiDAI6aAEYkTgsahDNy+BhUQgEgbRoZCoiEpSokuXLh26CAUz4/5YECSIdH++GHFjG9f9o9tq4Bxn5r33+X3fm/d2QZt0YZNy0RZYpZnZUuy/VSwMw71RFF0goqlUKjW5KVJprT3AzG+JaOeystc3HCydTh+Moug1Ee3IpZuZJzYUzFrbvri4+BLA9vwaZObeDQPTWh8loucAtnlQV5RSdzcEzFp7gpmfEVEiD4qJ6LKU8oHbqzmYMaaTiJ4QUTwfCsAlIcTD3F5NwbTWXQDGiChWDKqmillru5l51MtSxMwXlVKP/QZcE8VWgcoS0Xkppau1FQthGKay2ewoM7cCuCqlfFrp+Ch23xjTS0T3PaWyAM4KIV6sZgut9TiA08sXmJl7lFIj1YDTWvcDGPJ8LQDoLAa1VGNaa9dLTuYbA+gTQgyvB85aO8DMg16P+kVEp5RSb0r5hjFmPzNP+d2XiG5IKW+XclDoXGt9C8BND+pnEATHhRDvy/G5VPyF5tWy8R0p5bVyHOXuaK0HAQz4UPF4vCOZTH4s19efV1lgwud8DEsp+8pxqLUeAtDv3f0Ri8WOVQK1oo+FYbhvYWFhAsAu74tHpJQ9ANzYWLGYGdZa9/LcC8xfcwA6hBCfyvmwv+rcN7DWtjKzq4NG7+yREKIbwKIH7aBc4+z29mcTicSRpqamz5VCrVAsr05aAHwoADcuhDgHwDVHYuaYMWYMQJcPFQTBISHEl7VArQrmDrTWDm6SiJKe81dCiDOOy1rrhrEbyvkrA6B9PVBFwdzhzMxMcxRFrpUoT5F3AOYKQKWZ+bBS6utalcrZlZyVxpg97g8CEe0uESwdBMHBVCo1vV6okorlAmQyGTU/P+/gmgsFZWYdi8XaqgVVNpi7mE6nk9lsdhJAiwf3nYjapJTfqqFU2anMD2aMcS3EtZLW5f3purq6tsbGRl1NqIoUywVm5jr3m93B1dfX32toaJitNtSawP4FRCGfJV9lrUD8OFtglSq/pViliv0GWXY44L2QOz4AAAAASUVORK5CYII=',
        err:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAACy0lEQVRIS7XXSWsUQRgG4PfrHiOIJw9DLz/BqyKRmMgQcQnGuBACooLgQS96Ebx6EW/eBEVBCC6IMS6oEbeLCCKI4MU/UFUDOUgkCppMv1KhWzplz3RPkplb18zUU+9XS3eLMWYzyfMALkdR9A09/BhjtiZJcsbzvIuilPogIv0AftRqtaF6vf6lF7YxZmeSJDMish7AlBhjTpC8lWI9wR20JSKjYkGt9SkA13uBO+gigPEoiqaX4F7hSqldAJ6m5V0UkbEwDJ9Z7x+cw6+l7asqu0VFxCLrACxD/4NtgzHmeDrndlArwsvQQrgIF5HhMAw/VVntVdC2cAE+LyKNMtxBF0TkYDan7qCXzbH7pVP2jrgxZoTkdDqnCyRH4jh+1a5KHeGqyVP0EYAagFK0Y6nzI+2UfCVoZbhdcgB1kl0lzQKVljqfXCk1ISJ30n3+E4A9dyuXN99XV7D9o4OD5G8A+zstpKIF1jVsjDlC8n526lnY9/19QRC8rbLPV1TqFL0HwAfwC0CfLbXF7SETRdH7qnjlxEqpURF5mEN3k9zktlXFK8EpOlWUzq2C53mNIAg+liUvhbXWe+ytLUOL5tOZ93nP84bL8I6wRUk+FpE+kn9839/bbhFprY8CmEwXXSneFnZRETkQRdFMpxK6OMmhOI4/V95OzWaz0Wq1Xtik9iZu92kZmnWulDopIjfS5HMkG0X4f4lT9Hn2uELycBzHT8oWi3PCWfxm2jbned6OIAi+tj25tNYDJF+vBs06N8acJnnVXpP87vv+UB7PP+wNAHgJYAOAFslD3SYtuJ8vw0Vke/bSsAQ3m81tSZLYI28JFZGJMAwfdFPedr/NJwcwC2DQ4qK13gLgHYCNtioiMr5WaDYYrfU5AFfS61nf9/vtK8wb+zxlUQDHoii6vRZJ3T4cfMomHgRwgeRkHMd3e4Hmkp8FMEby0l8qK9qQ0A6pwwAAAABJRU5ErkJggg==',
tip:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABrUlEQVRIS+3WMUsDMRQA4PcKtlBQiu1J76UFpUgHVyd/gJs4iri4Cro4SxXBWdBFHARBHJxd/AUOrg4i0sVe2iMVcY69SCTDVSi9HDZdmuXg7iVfkktegjCmgmNyYQInmvkgCKqI2AAACQANIuomqhgLSjXVnPNnAFjS7Sil3hhjiyOHhRC+lJLHoVwuVy0Wiy0b3HrEnU5nLoqiMI7k8/nZQqHwOVJYKYXtdjuKIYqIMjaojrUesa7EOf8CgBmDdYnIcwU3AWDBLK5XxljdFfwEAMsGfmSMrbiCHwBg1cD3jLE1V/AtAGwa7JqItp3AQRCcI+KuwU6JaN8VfISIhwY7IKITV/AeIp4ZbIeILpzAnPMtALj5TQSIG77v3zmBwzCs9Xq9F41lMpl6uVzW+9qqpMpcWhBCkH56ntd3YCTVU8NJgUFxqWAhxLSUch0Ra1EUXTHG3m07kgr+cxFoEdE8IvZscGtY/1spZRBHstlspVQq9b0b1glrWCk1xTlvImLF5OoPIioj4vcwLP7dGjYrWl9/js0+vvR9X59WViUVbCUMCJ7A/zGLidr4AdwkmB8lttWIAAAAAElFTkSuQmCC'
    },
    toastTxtObj : {
        right:'成功',
        err:'失败',
        tip:'提示'
    },
    /*
    * icon 1成功   2失败  3 提示
    * toastTxt 提示语
    * time 关闭前的毫秒数 不传默认2000
     */
    showToast: function(icon,toastTxt,time){
        var iconSrc;        
        switch(parseInt(icon)){
            case 1:
            iconSrc = this.iconObj.right;
            break;
            case 2:
            iconSrc = this.iconObj.err;
            break;
            case 3:
            iconSrc = this.iconObj.tip;
            break;
            default:
            iconSrc = this.iconObj.right;
            break;
        }
        var toastTxt = toastTxt || this.toastTxtObj.right;
        html = '<div class="toast-icon"><img src="'+iconSrc+'"></div><div class="toast-tip">'+toastTxt+'</div></div>';
        toastBox = document.createElement('div');
        toastBox.className = 'toast';
        toastBox.id = 'toast';
        toastBox.innerHTML = html;
        document.body.appendChild(toastBox);
    setTimeout(function(){
      document.getElementById('toast').parentNode.removeChild(document.getElementById('toast'));
    },time||2000)
    },
    loadCss:function(){
        toastCss = document.createElement('link');
        toastCss.rel = 'stylesheet';
        toastCss.type = 'text/css';
        toastCss.href = this.T() + 'toast.css';
        document.head.appendChild(toastCss);
    },
    T:function() {
        var b, a, f = window['document']['getElementsByTagName']("script");
        for (var c = 0; c < f.length; c++) {
            b = f[c].getAttribute("src") || "";
            b = b.substr(0, b.toLowerCase().indexOf("toast.js"));
            var a = b.lastIndexOf("/");
            if (a > 0) {
                b = b.substring(0, a + 1)
            }
            if (b) {
                break;
            }
        }
        return b
    }



}
var T = new toast();
T.init();

已上代码不用看，按下面操作来就行：

1.新建文件夹 如toast

2.新建css文件，命名toast.css,把上面的css复制到这个文件里

3.新建js文件，命名toast.js,把上面的js复制到这个文件里

好了，准备完毕，下面是用法：

一、       仅引入js 如：

<script src="../static/plugins/toast/toast.js"></script>

二、       具体用法如下：

/*

* T.showToast(icon,toastTxt,time);

* 三个参数

* icon 1成功   2失败  3 提示

* toastTxt 提示语

* time 关闭前的毫秒数 不传默认2000

* 示例如下：

*/

T.showToast(1,'我是提示语',2000);