React实现全局组件的Toast轻提示效果


Posted in Javascript onSeptember 21, 2018

Toast是常用的轻提示弹框,常用于页面loading和提示语弹窗。

本例基于React实现一个随时可调用且不随页面渲染的全局组件。

需求分析

  • Toast 不需要同页面一起被渲染,而是根据需要被随时调用。
  • Toast 是一个轻量级的提示组件,它的提示不会打断用户操作,并且会在提示的一段时间后自动关闭。
  • Toast 需要提供几种不同的消息类型以适应不同的使用场景。
  • Toast 的方法必须足够简洁,以避免不必要的代码冗余。

如何使用

首先引入

import Toast from './components/toast'

JSX中事件调用:

<button onClick={() => { Toast.info('普通提示') }}>普通提示</button>

JS中方法调用:

Toast.info('普通提示')

回调方法:

const hideLoading = Toast.loading('加载中...', 0, () => {
  Toast.success('加载完成')
})
setTimeout(hideLoading, 2000)

调用规则:

3个参数:

  • content 提示内容 string(loading方法为可选)
  • duration 提示持续时间 number,单位ms(可选)
  • onClose 提示关闭时的回调函数(可选)
Toast.info("普通",2000)
Toast.success("成功",1000,() => {
  console.log('回调方法')
}))
Toast.error("错误")
Toast.loading()

代码实现

目录结构:

React实现全局组件的Toast轻提示效果

  1. index.js:对外export接口,设置默认的参数值,全局创建或销毁Toast的DIV。
  2. toast.js:Toast具体显示的内容及多次调用Toast时的状态管理。
  3. toast.css:Toast的样式,费话不多说。

index.js:

import React from 'react'
import ReactDOM from 'react-dom'
import Toast from './toast'
import './toast.css'

function createNotification() {
  const div = document.createElement('div')
  document.body.appendChild(div)
  const notification = ReactDOM.render(<Toast />, div)
  return {
    addNotice(notice) {
      return notification.addNotice(notice)
    },
    destroy() {
      ReactDOM.unmountComponentAtNode(div)
      document.body.removeChild(div)
    }
  }
}

let notification
const notice = (type, content, duration = 2000, onClose) => {
  if (!notification) notification = createNotification()
  return notification.addNotice({ type, content, duration, onClose })
}

export default {
  info(content, duration, onClose) {
    return notice('info', content, duration, onClose)
  },
  success(content = '操作成功', duration, onClose) {
    return notice('success', content, duration, onClose)
  },
  error(content, duration , onClose) {
    return notice('error', content, duration, onClose)
  },
  loading(content = '加载中...', duration = 0, onClose) {
    return notice('loading', content, duration, onClose)
  }
}

toast.js:

import React, { Component } from 'react'

class ToastBox extends Component {
  constructor() {
    super()
    this.transitionTime = 300
    this.state = { notices: [] }
    this.removeNotice = this.removeNotice.bind(this)
  }

  getNoticeKey() {
    const { notices } = this.state
    return `notice-${new Date().getTime()}-${notices.length}`
  }

  addNotice(notice) {
    const { notices } = this.state
    notice.key = this.getNoticeKey()

    // notices.push(notice);//展示所有的提示
    notices[0] = notice;//仅展示最后一个提示
    
    this.setState({ notices })
    if (notice.duration > 0) {
      setTimeout(() => {
        this.removeNotice(notice.key)
      }, notice.duration)
    }
    return () => { this.removeNotice(notice.key) }
  }

  removeNotice(key) {
    const { notices } = this.state
    this.setState({
      notices: notices.filter((notice) => {
        if (notice.key === key) {
          if (notice.onClose) setTimeout(notice.onClose, this.transitionTime)
          return false
        }
        return true
      })
    })
  }

  render() {
    const { notices } = this.state
    const icons = {
      info: 'toast_info',
      success: 'toast_success',
      error: 'toast_error',
      loading: 'toast_loading'
    }
    return (
      <div className="toast">
        {
          notices.map(notice => (
            <div className="toast_bg" key={notice.key}>
              <div className='toast_box'>
                <div className={`toast_icon ${icons[notice.type]}`}></div>
                <div className='toast_text'>{notice.content}</div> 
              </div>
            </div>
          ))
        }
      </div>
    )
  }
}

export default ToastBox

toast.css:

.toast {
 position: fixed;
 left: 0;
 top: 0;
 z-index: 999;
 display: flex;
 flex-direction: column; }
 .toast_bg {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0; }
 .toast_box {
  position: relative;
  left: 50%;
  top: 50%;
  width: 2.8rem;
  height: 2rem;
  margin: -1rem -1.4rem;
  background: rgba(0, 0, 0, 0.65);
  border-radius: .1rem;
  color: #fff; }
 .toast_text {
  position: absolute;
  bottom: 16%;
  text-align: center;
  width: 90%;
  margin: 0 5%;
  height: .28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }
 .toast_icon {
  position: relative;
  left: 50%;
  top: 15%;
  margin: -.4rem;
  width: .8rem;
  height: .8rem; }
 .toast_loading {
  -webkit-animation: loading 1s steps(12, end) infinite;
  animation: loading 1s steps(12, end) infinite;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMAENCA8KAgsGDgQMCQUDBwhylaLQAAAL1JREFUOMu9U0kSwyAMK9jsS/T/1zZt2pgEZzq9RBeMZYRGDI/70bO5JptjrOAQVTonIJVK5bW2ma9A7VvpK8OdeQfbZectrDnyU+Oo0b68wGK0muDPdxpOciaizq5pkAgiIPAoew2rBVNYZoM2YHbZDNKz/2Ogam3ff5gMEL8wisfh2KKZiFiGWFkk1B7NSbhNQFy4M2+PghbODNsg7y8THM2njiy8gBgcaEUA9GgNJbxh6fJv+NxiFvYmPAFtCQZNK1qZIAAAAABJRU5ErkJggg==") no-repeat;
  background-size: 100%; }
 .toast_success {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAM1BMVEUAAAD///////////////////////////////////////////////////////////////+3leKCAAAAEHRSTlMA8DAQ0GBP4LCggMBwIJBAIttdjAAAAINJREFUOMvdkUsOwyAMBbH5hUCauf9pK1SlohF438x2LPn52f09+8vUfiNb/gighj8FouEjYCUoQDXiBSD7pdcMiK7XC9wCFmlDO3T20Scgx287ne13pwDU89NOJ3g3maCmJDANqIGRtLj8oi1ed1GMdmcB7wXIYX8QdQZJiM5Em3smbyVICDCOrCqSAAAAAElFTkSuQmCC") no-repeat;
  background-size: 100%; }
 .toast_error {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAMFBMVEUAAAD///////////////////////////////////////////////////////////87TQQwAAAAD3RSTlMA0BDAMODwUKBgsCCAQJClzVPvAAAA0UlEQVQoz2MgErAclv9o44Dgc8b/B4KvBTA+t/3XdgeWivjPG6ACbl8ngNXlp0AN+L8IwtD6DzFm2w+Y3v5sMGW/ACbA9Rms9ZsCTIApH2QR608GhoUKQJ4xA8P8AKCAP5CwF2JgUPwIlPwCFDj/AMRRYJIHCnL8AZkJ1AfkAcUYGNhBpso7MICUgBQw8H4EEv/B5ssDFYA4mAKYWjANfd+Aai3CYZ9BDoM63RDkdEGQ0zE9h+l9zADCDEIGt2/wQEZEwwVepGhgYEdEFGZUEgYAW05XI3jSsVwAAAAASUVORK5CYII=") no-repeat;
  background-size: 100%; }
 .toast_info {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAALVBMVEUAAAD///////////////////////////////////////////////////////+hSKubAAAADnRSTlMA4CCAwKBAMJBg8NAQUNhWlbcAAAC+SURBVCjPYyASsLfse+1cgOBzyr0DgocXYHwmv4dtCkwZck8UoAJZDydA1C2H8NnexUAYR99BjNF6CtMbtwhM+QUACUUhIMH6BKz14QEgafcYSPDIgSxifMkAE2CYJwAk6gQQAozPgURfA0KAA0T6JSAE2ECm7lNACDC9BhLvGGACIA6GAFyLohBEC9xQqLeeQKwFA4i1EIfBAeNzuNMVhSBOx/AcpvcxAwgzCDEDGTMaGHhhEYWIShN4VBIGAPvRT5YzufhUAAAAAElFTkSuQmCC") no-repeat;
  background-size: 100%; }

@-webkit-keyframes loading {
 0% {
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg); }
 100% {
  -webkit-transform: rotate3d(0, 0, 1, 360deg);
  transform: rotate3d(0, 0, 1, 360deg); } }

@keyframes loading {
 0% {
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg); }
 100% {
  -webkit-transform: rotate3d(0, 0, 1, 360deg);
  transform: rotate3d(0, 0, 1, 360deg); } }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS之小练习代码
Oct 12 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
Jquery cookie操作代码
Mar 14 Javascript
IE与Firefox在JavaScript上的7个不同句法分享
Oct 30 Javascript
JSON语法五大要素图文介绍
Dec 04 Javascript
利用jquery包将字符串生成二维码图片
Sep 12 Javascript
Javascript MVC框架Backbone.js详解
Sep 18 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
Sep 21 #Javascript
vue 使某个组件不被 keep-alive 缓存的方法
Sep 21 #Javascript
解决vue keep-alive 数据更新的问题
Sep 21 #Javascript
vue axios基于常见业务场景的二次封装的实现
Sep 21 #Javascript
vue2使用keep-alive缓存多层列表页的方法
Sep 21 #Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 #Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 #Javascript
You might like
MySql中正则表达式的使用方法描述
2008/07/30 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php实现读取和写入tab分割的文件
2015/06/01 PHP
基于JQuery+PHP编写砸金蛋中奖程序
2015/09/08 PHP
页面只有一个text的时候,回车自动submit的解决方法
2010/08/12 Javascript
js对象数组按属性快速排序
2011/01/31 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
模板视图和AngularJS之间冲突的解决方法
2016/11/22 Javascript
JavaScript BASE64算法实现(完美解决中文乱码)
2017/01/10 Javascript
Angularjs实现控制器之间通信方式实例总结
2018/03/27 Javascript
nodejs分离html文件里面的js和css的方法
2019/04/09 NodeJs
webpack常用构建优化策略小结
2019/11/21 Javascript
原生JavaScript实现随机点名表
2021/01/14 Javascript
python解析xml模块封装代码
2014/02/07 Python
浅析Python中的序列化存储的方法
2015/04/28 Python
深入理解Python对Json的解析
2017/02/14 Python
在unittest中使用 logging 模块记录测试数据的方法
2018/11/30 Python
Python的log日志功能及设置方法
2019/07/11 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
python中eval与int的区别浅析
2019/08/11 Python
Python Gitlab Api 使用方法
2019/08/28 Python
python实现在一个画布上画多个子图
2020/01/19 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
python基于opencv 实现图像时钟
2021/01/04 Python
美国著名的家居用品购物网站:Bed Bath & Beyond
2018/01/05 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
校园歌手大赛策划书
2014/01/17 职场文书
学生会干部自荐信
2014/02/04 职场文书
学期个人自我总结
2015/02/13 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
运动会加油稿
2015/07/22 职场文书
医院保洁员管理制度
2015/08/05 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
Python实现简单的俄罗斯方块游戏
2021/09/25 Python