This is the 13th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

TIP 👉 boohoo! Although chu three households can destroy qin, there is no open China! ____ Lu You “Golden Mistake Knife Trip”

preface

Web Component is an area that the front-end world has been very enthusiastic about. To implement it with third-party componentized frameworks, you need to rely on a lot of things in the framework itself. Most of the time we just have a few simple components, not too big, not too many, so in order to keep the components lightweight, Simple, we don’t really want to use a third party framework at this point.

Toast controls

import

import Toast from '@/components/Toast/index';
Copy the code

Props

None (Component has no props, logic control is in index.js)

Use the following

Parameters for details

• Content: Displays customized information. The default information is’ operation succeeded ‘, ‘loading… ‘
• Duration: indicates the closing time of user-defined toast. The default value is 2000
• OnClose: true/false Indicates whether to disable the identifier

Toast.info(content, duration, onClose)
Toast.success(content, duration, onClose)
Toast.error(content, duration, onClose)
Toast.loading(content, duration, onClose)
Copy the code

import React, { Component } from 'react'
import './Toast.scss'

class ToastBox extends Component {
  constructor() {
    super(a)this.transitionTime = 300
    this.state = { notices: []}this.removeNotice = this.removeNotice.bind(this)}getNoticeKey() {
    const { notices } = this.state
    return `notice-The ${new Date().getTime()}-${notices.length}`
  }

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

    // notices.push(notice); // Display all the hints
    notices[0] = notice;// Show only the last hint

    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
    return (
      <div className="toast">
        {
          notices.map(notice => (
            <div className="toast_bg" key={notice.key}>
              <div className='toast_box'>
                <div className='toast_text'>{notice.content}</div>
              </div>
            </div>))}</div>)}}export default ToastBox
Copy the code

I’m going to leave the styles out for now

“Feel free to discuss in the comments section.”

Hope to finish watching friends can give a thumbs-up, encourage once