自定义Toast提示弹窗(且可旋转)

/**
 * 自定义 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);
};

你可能感兴趣的:(React,JavaScript,前端,html5,javascript)