纯js提示组件

最新推荐文章于 2024-09-11 15:33:18 发布

翟少钵

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量78

点赞数

文章标签： javascript 前端 html Powered by 金山文档

本文链接：https://blog.csdn.net/web_abecedarian/article/details/129448832

版权

该代码段展示了一个JavaScript函数`displayAlert`，用于创建不同类型的弹窗通知，包括成功（success）、错误（error）和信息（info）。函数接受类型、数据和持续时间作为参数，动态生成包含图标和文字内容的弹窗，并利用CSS动画进行显示和关闭。弹窗样式包括定位、背景色、字体大小等，并使用iconfont库提供图标颜色定制。

摘要由CSDN通过智能技术生成

const displayAlert = (type: 'succ' | 'error' |'info', data, time) =>{

    var popUp = document.createElement("div");
    let icon = null;
    if (type == "succ") {
      icon = '<i class="iconfont 图标类名  success"></i>'
    } else if (type == "error") {
      icon = '<i class="iconfont 图标类名  error"></i>'
    } else if (type == "info") {
      icon = '<i class="iconfont 图标类名 info"></i>'
    } else {
      console.log("入参type错误");
      return;
    }

    popUp.id = "popUp";
    popUp.className = styles.commonPopUp;
    popUp.style.animationName = "popUp";
    popUp.style.animationDuration = time / 1000 - 0.5 + 's';
    popUp.style.animationFillMode = 'forwards';

    if (document.getElementById("popUp") == null) {
      document.body.appendChild(popUp);
      popUp.innerHTML = icon + data;
      setTimeout(function () {
        document.body.removeChild(popUp);
      }, time);
    }
  }

.commonPopUp {
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #FFF;
  font-size: 16px;
  border-radius: 4px;
  color: #333;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  z-index: 999;
  :global{
    .iconfont {
      margin-right: 10px;

      &.success {
        color: #52c41a;
      }

      &.error {
        color: #F5222D;
      }

      &.info {
        color: #FAAD14;
      }
    }
  }
}