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

最新推荐文章于 2024-06-12 09:52:23 发布
最新推荐文章于 2024-06-12 09:52:23 发布
阅读量877 收藏 1
点赞数
文章标签： javascript 前端 ViewUI
原文链接：https://segmentfault.com/a/1190000018012740
版权

以下是封装的代码

/**
 * 用原生 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>
weixin_33874713
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2. 做一个极简 UI 库之Toast 组件
小陈的博客
12-24 704
这里主要是对于 vue 的render的运用。然后还可以学到这个类型处理的方法。当然了我走过的坑小伙伴们就别再走一次了整理了一套《前端大厂面试宝典》，包含了HTML、CSS、JavaScript、HTTP、TCP协议、浏览器、VUE、React、数据结构和算法，一共201道面试题，并对每个问题作出了回答和解析。
Toastjs一个JavaScript原型吐司消息
08-09
Toast.js：一个JavaScript原型吐司消息Toast messages
js : toast 弹框
hunter
05-26 3044
抄的： 感谢大佬。 js 简单弹框toast function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document.createElement('div'); m.innerHTML = msg; m.style.cssText="max-width:60%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 255,
开启全新通知体验：Toast —— Bootstrap与jQuery的完美结合
最新发布
gitblog_00067的博客
06-12 701
???? 开启全新通知体验：Toast —— Bootstrap与jQuery的完美结合 项目地址:https://gitcode.com/Script47/Toast 在当今快速发展的Web开发领域中，用户界面(UI)的友好性和交互性越来越受到重视。一款优秀的UI组件不仅能够提升用户体验，还能极大地简化开发者的编码工作。今天，我们要向大家隆重推荐一个名为Toast的强大工具——它是一款基于Bootst...
JavaScript 实现自定义 toast
实践求真知
10-19 670
JavaScript
js实现toast轻提示功能（纯原生）
前端-尔嵘
09-28 5626
参考一：根据提示内容进行自动消失的轻提示 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> @keyframes show { 0% { opacity: 0; } 100% {
js封装的Toast消息提示框，可作为消息提示、警示框、报错提示、确认框等，很方便好用！
编程界明世隐的博客
12-21 3162
目录 闲言 效果图： 语法 参数说明： 完整代码 欢迎交流指导！！ 闲言 周末花时间写了一个消息提示框，因之前项目里面用到的提示框有好几种，没有统一起来，这次就抽时间搞一个。 大概试了一下感觉还不错，蛮好用的，就拿出来分享，目前还没有用到项目中，可能会有些不适合的场景到时候就再修正吧。 效果图： 图1 图2： 图3: 图4： 语法 textToast(msg,option); 参数说明： msg：需要展示的内容。 option：可选对象，包含...
React Native开发封装Toast与加载Loading组件示例
10-18
主要介绍了React Native开发封装Toast与加载Loading组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android实用的Toast工具类封装
01-05
下面封装了一个工具类，帮助大家管理Toast,基本上可以满足常用的需求，如果还满足不了，那就自定义了，呵呵~ import android.content.Context; import android.view.View; import android.widget.ImageView; i
在vue中封装可复用的组件方法
11-26
本次封装的组件以toast组件为例 以前使用移动端ui插件时，通过一句代码比如 $.toast( ‘ 需要显示的内容 ‘ )，从而在页面上展示这段文字，并在一定时间后消失。 现在我们也尝试自己封装toast组件。 准备工作：vue-...
js封装的Toast消息提示框，可作为消息提示、警示框、报错提示、确认框等，很方便好用
2401_84139697的博客
04-17 2119
if(type===‘show’){//如果是一直展示的，必须要有关闭按钮和标题。if(cache[p+‘_increment’]){//如果缓存中有则从中取。if(typeof speed===‘number’){//如果传入的是。function confirmDiv(){//关闭是不执行回调函数的。function closeDiv(){//关闭是不执行回调函数的。if(bgFlag){//如果是有遮罩的，相互切换需要另外处理。if(cache[p+“_cur”]){//从缓存中取。
js封装的Toast消息提示框，可作为消息提示、警示框，理解透彻
2301_82101171的博客
03-30 1114
阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-A6Fqv0ia-1711758545669)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新。
toast:js封装一个简单的toast
05-30
toast js封装一个简单的toast兼容ie9+ 使用方法： 1）引入js组件 下载好toast.js放置在项目index.html同级目录下使用script标签引入 [removed][removed] 2）配置使用 var toast = new Toast({ text : "提示", //toast提示文本 center: false, //是否显示在屏幕中间 top: "90%", //距离屏幕顶部的距离 bgColor: "#000", //toast背景颜色 textSize: "14x", //提示文本字体大小 time: "1000", //toast显示到消失的时长ms radius: "100px", //toast边框圆角 textColor
js 简单弹框toast
weixin_30784141的博客
11-14 144
新建toast.js文件 function Toast(msg,duration){ duration=isNaN(duration)?3000:duration; var m = document.createElement('div'); m.innerHTML = msg; m.style.cssText="max-wi...
js封装的Toast消息提示框，可作为消息提示、警示框、报错提示、确认框等，很方便好用！(1)
2401_84092423的博客
05-06 293
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
使用javascript实现简单的Toast功能
王天慧的专栏
03-21 2520
Toast.js //暴露给外部的方法 export default function (string, time) { time = time || 3; const message = new Message(string, time); message.showAndHide(); } let Message = function (message, time) { ...
js 精美toast弹出窗
qq_34304065的博客
06-05 497
引入pxmu.js pxmu.js是一款超轻量的js弹出层插件。 使用也非常简单，直接引入cdn <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/shiyueGG/pxmu@1.0.6/pxmu.min.js"></script>
React封装toast组件
03-29
以下是一个简单的React封装toast组件的示例： ```jsx import React, { useState, useEffect } from 'react'; import ReactDOM from 'react-dom'; import './toast.css'; const Toast = ({ message, duration = 3000, onClose }) => { const [visible, setVisible] = useState(false); useEffect(() => { setVisible(true); const timer = setTimeout(() => { setVisible(false); onClose && onClose(); }, duration); return () => clearTimeout(timer); }, [duration, onClose]); return visible ? ( <div className="toast"> <div className="toast-message">{message}</div> </div> ) : null; }; const showToast = (message, duration = 3000, onClose) => { const div = document.createElement('div'); document.body.appendChild(div); ReactDOM.render( <Toast message={message} duration={duration} onClose={() => { ReactDOM.unmountComponentAtNode(div); onClose && onClose(); }} />, div ); }; export default showToast; ``` 这个组件包含一个`Toast`组件和一个`showToast`函数。`Toast`组件接收`message`、`duration`和`onClose`作为属性，其中`message`表示要显示的消息，`duration`表示消息显示的时间（默认为3秒），`onClose`表示关闭消息时的回调函数。 `showToast`函数用于在页面上创建一个`Toast`组件并显示消息。它接收与`Toast`组件相同的属性，还有一个可选的`onClose`回调函数，用于在消息关闭时执行其他操作。 在使用时，可以像这样调用`showToast`函数： ```jsx import React from 'react'; import showToast from './toast'; const MyComponent = () => { const handleClick = () => { showToast('Hello, world!', 2000, () => console.log('Toast closed.')); }; return ( <button onClick={handleClick}>Show Toast</button> ); }; export default MyComponent; ``` 这个示例在点击按钮时显示一个消息框，显示2秒后关闭，并在关闭时输出一条消息到控制台。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值