封装toast，增加默认/成功/失败类型

章节回顾：

• 又重新封装了一下toast提示

---

之前的封装中，没有类型区分，所有提示都默认黑色样式。

本次封装，将根据提示类型，分为默认、成功和失败三种情形。

js

import './showToast.css'

class ShowToast {

  default(text) {
    this.showToast(text, 'default')
  }

  success(text) {
    this.showToast(text, 'success')
  }

  fail(text) {
    this.showToast(text, 'fail')
  }

  /**
 * @text 提示文案
 * @status 默认/成功/失败状态
 */
  showToast(text, status) {
    var transitionTime = 200; // toast消失用时200ms
    var existTime = 1500; // 一条toast存在的时间，1500ms后自动消失
    var totalTime = transitionTime + existTime; // 所有操作都结束的时间
    // toast提示的外层盒子
    var wrap = document.querySelector("#toast__wrap");
    // 如果外层盒子不存在，就创建一个新的外层盒子
    if (!wrap) {
      var _wrap = document.createElement("div");
      _wrap.setAttribute("id", "toast__wrap");
      document.body.appendChild(_wrap);
      wrap = document.querySelector("#toast__wrap");
    }
    // 创建toast盒子
    var _div = document.createElement("div");
    _div.setAttribute("class", `toast ${status}`);
    wrap.appendChild(_div);
    _div.innerHTML = text;
    var toasts = document.querySelectorAll(".toast");
    // 如果toast同时存在两条，那么最初的那条，要去掉
    if (toasts.length === 2) {
      toasts[0].classList.add("toast-move");
      var outTimer = null;
      // toast提示执行transition动画后，就删除
      outTimer = setTimeout(function () {
        toasts[0].remove();
        clearTimeout(outTimer);
      }, transitionTime);
    } else if (toasts.length > 2) {
      // 如果快速点击，导致同时存在的toast提示有很多，那么就把旧的toast都删除
      // 目的是永远只保留最新的那一条toast提示
      toasts[0].remove();
      toasts[1].remove();
    }
    var timer1 = null;
    var timer2 = null;
    // 一条toast提示最多存在1500ms，
    // 在没有任何操作的情况下，1500ms后toast会自动开始消失
    timer1 = setTimeout(function () {
      toasts[toasts.length - 1].classList.add("toast-move");
      clearTimeout(timer1);
    }, existTime);
    // 等到所有动画和操作都结束了，检查当前还有没有toast提示存在
    // 如果有，就删除，如果没有，连外层盒子也跟着删除
    // 同时，把变量都设为null，防止内存泄漏
    timer2 = setTimeout(function () {
      toasts[toasts.length - 1].remove();
      wrap.childNodes.length === 0 && wrap.remove();
      clearTimeout(timer2);
      wrap = null;
      toasts = null;
    }, totalTime);
  }
}

export default new ShowToast()

---

css

#toast__wrap {
  position: fixed;
  z-index: 999;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
}

#toast__wrap .toast {
  width: 100%;
  /* background-color: rgba(0 0 0 / .6); */
  box-sizing: border-box;
  padding: 2px 5px;
  border-radius: 12px;
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin-bottom: 5px;
  margin-top: 0;
  opacity: 1;
}

.toast.default {
  background-color: rgba(0 161 214 / 43%);
  border: 1px solid rgba(0 161 214 / 90%);
}

.toast.success {
  background-color: rgba(89 202 115 / 69%);
  border: 1px solid rgba(89 202 115 / 99%);
}

.toast.fail {
  background-color: rgba(240 119 117 / 69%);
  border: 1px solid rgb(240 119 117 / 99%);
}

.toast.toast-move {
  margin-top: -25px!important;
  opacity: 0!important;
  transition: margin-top .2s linear, opacity .2s linear !important;
}

---

使用

import toast from './showToast'

// 默认
toast.default('默认样式')

// 成功
toast.success('注册成功！')

// 失败
toast.fail('登录失败！')

---