自定义Toast提示弹窗（且可旋转）

迷途小码农零零发

已于 2023-08-17 16:44:21 修改

阅读量286

点赞数

分类专栏： React JavaScript 文章标签：前端 html5 javascript

于 2023-08-07 16:05:01 首次发布

本文链接：https://blog.csdn.net/yiguoxiaohai/article/details/132148467

版权

React 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

/**
 * 自定义 Toast
 * @param param
 * title: 内容
 * duration：toast持续时间，单位 毫秒
 * rotate：toast可旋转的角度度数，单位 deg
 */
export const Toast = ({ title, duration = 2000, rotate = 0 }) => {
  const _duration = isNaN(duration) ? 2000 : duration;
  const divElement = document.createElement('div');
  divElement.innerHTML = title;
  divElement.style.cssText = `position: fixed;top: 50%;left: 50%;z-index: 99;display: flex;
  align-items: center;justify-content: center;padding: 12px 16px;color: #ffffff;font-size: 15px;
  background: rgba(0, 0, 0, 0.8);border-radius: 4px;transform: translate(-50%, -50%) rotate(${rotate}deg);`;
  document.body.appendChild(divElement);
  setTimeout(() => {
    const d = 0.1;
    divElement.style.transition = `opacity ${d}s linear 0s`;
    divElement.style.opacity = '0';
    setTimeout(function () {
      document.body.removeChild(divElement);
    }, d * 1000);
  }, _duration);
};