原生 js 写的仿 antd message 组件

使用示例

message.warning({
  notice: '服务器连接异常',
    reload: true,
    duration: 0,
    onClick:() => {
      alert(2)
  },
})

js 文件 index.js

import './style.css'
/**
 * 加载中
 * @param {*} props 
 */
function loading(props) {
  initMsg({
    ...props,
    icon: '<svg viewBox="0 0 1024 1024" focusable="false" class="anticon-spin" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 0 0-94.3-139.9 437.71 437.71 0 0 0-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg>'
  })
}
/**
 * 成功
 * @param {*} props 
 */
function success(props) {
  initMsg({
    ...props,
    icon: '<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 0 1-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg>'
  })
}
/**
 * 提示
 * @param {*} props 
 */
function info(props) {
  initMsg({
    ...props,
    icon: '<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="info-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm32 664c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V456c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272zm-32-344a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path></svg>'
  })
}
/**
 * 警告
 * @param {*} props 
 */
function warning(props) {
  initMsg({
    ...props,
    icon: '<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 0 1 0-96 48.01 48.01 0 0 1 0 96z"></path></svg>'
  })
}
/**
 * 错误
 * @param {*} props 
 */
function error(props) {
  initMsg({
    ...props,
    icon: '<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 0 1-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg>'
  })
}
/**
 * DOM结构组装
 * @param {*} props 
 */
function initMsg(props) {
  // 自动关闭定时参数, 不设置默认三秒
  const defaultDuration = props.hasOwnProperty('duration') ? parseInt(props.duration) :  3000
  // 如果存在消息弹窗则先删除
  closeMsg()
  // 创建msg内容
  const msgContent = document.createElement('div')
  msgContent.className = 'msg_content'
  msgContent.innerHTML = props.icon  // 添加图标
  msgContent.innerHTML += `<span class='notice'>${props.notice}<span>`
  // 添加短线重连按钮
  const msgBtn = document.createElement('span')
  msgBtn.className = 'reload_btn'
  msgBtn.innerHTML = '重连'
  msgBtn.onclick = props.onClick
  props.reload && msgContent.appendChild(msgBtn)
  // 创建外部容器
  const msgBox = document.createElement('div')
  msgBox.className = 'sock_msg_box'
  msgBox.id = 'sockMsg'
  msgBox.appendChild(msgContent)
  // 添加 msg 内容到页面
  document.body.appendChild(msgBox)
  // 存在定时参数且不为 0 则定时关闭
  defaultDuration && setInterval(closeMsg,defaultDuration)
}
/**
 * 删除消息提示
 */
function closeMsg() {
  const meaageDom = document.getElementById('sockMsg')
  meaageDom && document.body.removeChild(meaageDom)
}
export default {
  loading,
  success,
  info,
  warning,
  error
}

样式文件 style.css

.sock_msg_box {
    min-width: 160px;
    padding: 10px;
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
}
.sock_msg_box .msg_content {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background: #fff;
    border-radius: 4px;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    pointer-events: all;
}
.sock_msg_box .msg_content .anticon-spin {
    -webkit-animation: loadingCircle 1s infinite linear;
    animation: loadingCircle 1s infinite linear;
    color: #1890ff;
}
.sock_msg_box .msg_content [data-icon=check-circle] {
    color: #52c41a;
}
.sock_msg_box .msg_content [data-icon=info-circle] {
    color: #1890ff;
}
.sock_msg_box .msg_content [data-icon=exclamation-circle] {
    color: #faad14;
}
.sock_msg_box .msg_content [data-icon=close-circle] {
    color: #f5222d;
}
.sock_msg_box .msg_content .notice {
    margin-left: 10px;
}
.sock_msg_box .msg_content .reload_btn {
    color: #f5222d;
    margin-left: 10px;
    cursor: pointer;
}
.sock_msg_box .msg_content .reload_btn:hover {
    position:relative;
    font-size: 12px;
    padding: 0.5px;
}