js封装toast组件——常用工具函数

2023年3月16日 112次阅读来源: Linda0821

以下是封装的代码

/**
 * 用原生 JS 封装一个 Toast 组件
 */
var Toast = {
    // 隐蔽的 setTimeOut 援用
    hideTimeOut: null,
    /**
     * 初始化
     */
    init: function () {
        var toastNode = document.createElement('section');
        toastNode.innerHTML = '<i class="iconfont icon-success"></i><i class="iconfont icon-error"></i><span class="text">111</span>';
        toastNode.id = 'toastWaka'; // 设置id，一个页面有且唯一一个Toast
        toastNode.setAttribute('class', 'toast');   // 设置类名
        toastNode.style.display = 'none';   // 设置隐蔽
        document.body.appendChild(toastNode);
    },
    /**
     * 显现Toast
     * @param text 文本内容
     * @param type 范例 success error
     * @param duration 持续时间
     */
    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款式设置

/*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;
}

怎样运用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>toast</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta name="description" content="" />
    <style>
    /*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;
    }
    </style>
</head>
<body>
    <section id="redbag">    
        <button class="downbtn" onclick="icCopy()">复制约请码</button>
    </section>
    <!--<script src="http://browser.umeweb.com/v6/ume/js/common/jquery.js"></script>-->
    <script src="./toast.js"></script>
    <script type="text/javascript">
        function icCopy() {
            try {
                // Now that we've selected the anchor text, execute the copy command
                var msg = '约请码已复制' ;
                var type =  'success';
                Toast.init();
                Toast.show(msg, type, null);
                setTimeout(function () {
                    Toast.hide();
                }, 20000);
            } catch (err) {
                Toast.init();
                Toast.show('Oops, unable to copy', 'error', null);
                setTimeout(function () {
                    Toast.hide();
                }, 20000);
            }
        }
    </script>
</body>
</html>

    原文作者：Linda0821
    原文地址: https://segmentfault.com/a/1190000018012740
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。