原生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);