JS：原生JS实现message消息提示框

已于 2022-05-25 09:50:21 修改
阅读量1.2w 收藏 27
点赞数 11
分类专栏： JS 文章标签： javascript 前端
于 2022-02-25 17:47:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44136505/article/details/123138144
版权

简介

学习了一下如何使用原生JS（加上class类）实现message消息提示框的封装（繁琐版）。
使用到的主要技术点：class类，JS。
在这里插入图片描述

功能点

1.四种提示状态（message success error warning）及文字显示；
2.不再提示（相同文字内容的消息）的功能按钮；
3.鼠标移入不消失，移出一秒后消失；

具体实现

1.新建一个message.js文件
// 消息类型
const MessageType = {
  MESSAGE: 'message', // 普通
  SUCCESS: 'success', // 成功
  ERROR: 'error', // 错误
  WARNING: 'warning' // 警告
}

// 状态icon图标
const MessageIcons = {
  MESSAGE: 'el-icon-info',
  SUCCESS: 'el-icon-success',
  ERROR: 'el-icon-error',
  WARNING: 'el-icon-warning'
}

// 状态对应的主色
const MessageTypeColor = {
  MESSAGE: '#909399',
  SUCCESS: '#67c23a',
  ERROR: '#f56c6c',
  WARNING: '#e6a23c'
}

// 创建DOM
const createDom = ({ isId = false, name = '', tag = 'div' }) => {
  if (!tag) {
    return null
  }
  const ele = document.createElement(tag)
  if (name) {
    if (isId) {
      ele.id = name
    } else {
      ele.className = name
    }
  }
  return ele
}

// 获取类型对应的背景色
const getTypeBGColor = type => {
  let bgColor = ''
  switch (type) {
    case MessageType.SUCCESS:
      bgColor = 'background-color: #f0f9eb'
      break
    case MessageType.ERROR:
      bgColor = 'background-color: #f0f9eb'
      break
    case MessageType.WARNING:
      bgColor = 'background-color: #f0f9eb'
      break
    default:
      bgColor = 'background-color: #edf2fc'
      break
  }
  return bgColor
}

// 获取类型对应的背景色、文字颜色
const getTypeDomCss = type => {
  let cssStr = ''
  let commonCss = ''
  switch (type) {
    case MessageType.SUCCESS:
      cssStr = commonCss + `${getTypeBGColor(type)};color: ${MessageTypeColor.SUCCESS};`
      break
    case MessageType.ERROR:
      cssStr = commonCss + `${getTypeBGColor(type)};color: ${MessageTypeColor.ERROR};`
      break
    case MessageType.WARNING:
      cssStr = commonCss + `${getTypeBGColor(type)};color: ${MessageTypeColor.WARNING};`
      break
    default:
      cssStr = commonCss + `${getTypeBGColor(type)};color: ${MessageTypeColor.MESSAGE};`
      break
  }
  return cssStr
}

// 获取类型对应的icon图标的code
const getIconClass = type => {
  let iconClass = ''
  switch (type) {
    case MessageType.SUCCESS:
      iconClass = MessageIcons.SUCCESS
      break
    case MessageType.ERROR:
      iconClass = MessageIcons.ERROR
      break
    case MessageType.WARNING:
      iconClass = MessageIcons.WARNING
      break
    default:
      iconClass = MessageIcons.MESSAGE
      break
  }
  return iconClass
}

// 获取类型对应的icon图标的额外样式
const getTypeIconCss = type => {
  let cssStr = ''
  let commonCss = 'margin-right: 10px;font-size: 20px;'
  switch (type) {
    case MessageType.SUCCESS:
      cssStr = commonCss + `color: ${MessageTypeColor.SUCCESS};`
      break
    case MessageType.ERROR:
      cssStr = commonCss + `color: ${MessageTypeColor.ERROR};`
      break
    case MessageType.WARNING:
      cssStr = commonCss + `color: ${MessageTypeColor.WARNING};`
      break
    default:
      cssStr = commonCss + `color: ${MessageTypeColor.MESSAGE};`
      break
  }
  return cssStr
}

const createMessage = ({ type, content, duration, delay, againBtn, minWidth, maxWidth }, mainContainer) => {
  if (!mainContainer) {
    console.error('主容器不存在，查看调用流程，确保doucument.body已生成!')
    return
  }
  /**随机的key */
  const randomKey = Math.floor(Math.random() * (99999 - 10002)) + 10002

  /**属性配置 */
  const config = {
    isRemove: false, // 是否被移除了
    type: type || MessageType.MESSAGE, // 类型 message success error warning
    content: content || '', // 提示内容
    duration: duration || 3000, // 显示时间
    delay: delay || 0, // 弹出延迟
    timeout: null, // 计时器事件
    againBtn: againBtn || false // 是否需要显示 不再提示 按钮
  }
  // #region 生成DOM、样式、关系
  const messageContainer = createDom({ name: `message-${randomKey}`, tag: 'div' })
  messageContainer.style = `
  min-width: ${minWidth}px;
  max-width:${maxWidth}px;
  padding: 12px 12px;
  margin-top: -20px;
  border-radius: 4px;
  box-shadow: -5px 5px 12px 0 rgba(204, 204, 204, 0.8);
  ${getTypeBGColor(config.type)};
  animation: all cubic-bezier(0.18, 0.89, 0.32, 1.28) 0.4s;
  transition: all .4s;
  pointer-events: auto;
  overflow:hidden;
  `
  /**内容区域 */
  const messageTypeDom = createDom({ tag: 'div' })
  messageTypeDom.style = getTypeDomCss(config.type)
  // icon
  // const messageTypeIcon = createDom({ name: `icon iconfont ${getIconClass(config.type)}`, tag: 'i' })
  const messageTypeIcon = createDom({ name: `${getIconClass(config.type)}`, tag: 'i' })
  messageTypeIcon.style = getTypeIconCss(config.type)
  /**文本内容 */
  const messageTypeText = createDom({ tag: 'span' })
  messageTypeText.style = 'font-size: 14px;line-height: 20px;'
  messageTypeText.innerHTML = config.content
  /**建立html树关系 */
  messageTypeDom.appendChild(messageTypeIcon)
  messageTypeDom.appendChild(messageTypeText)
  messageContainer.appendChild(messageTypeDom)
  /**不再提示的按钮 */
  if (config.againBtn) {
    const messageAgainDiv = createDom({ name: 'message-again-btn', tag: 'div' })
    messageAgainDiv.style = `margin-top: 5px;text-align: right;`
    const messageAgainBtnText = createDom({ name: 'message-again-text', tag: 'span' })
    messageAgainBtnText.innerHTML = '不再提示'
    messageAgainBtnText.style = `
      font-size: 12px;
      color: rgb(204, 201, 201);
      border-bottom: 1px solid rgb(204, 201, 201);
      cursor: pointer;
      `
    // 鼠标移入
    messageAgainBtnText.onmouseover = () => {
      messageAgainBtnText.style.color = '#fdb906'
      messageAgainBtnText.style.borderBottom = '1px solid #fdb906'
    }
    // 鼠标移出
    messageAgainBtnText.onmouseout = () => {
      messageAgainBtnText.style.color = 'rgb(204, 201, 201)'
      messageAgainBtnText.style.borderBottom = '1px solid rgb(204, 201, 201)'
    }
    messageAgainDiv.appendChild(messageAgainBtnText)
    messageContainer.appendChild(messageAgainDiv)
    config.elsAgainBtn = messageAgainBtnText
  }
  mainContainer.appendChild(messageContainer)
  // #endregion

  /**绑定DOM、销毁事件，以便进行控制内容与状态 */
  config.els = messageContainer
  config.destory = destory.bind(this)
  function destory(mainContainer, isClick) {
    if (!config.els || !mainContainer || config.isRemove) {
      // 不存在，或已经移除，则不再继续
      return
    }
    config.els.style.marginTop = '-20px' // 为了过渡效果
    config.els.style.opacity = '0' // 为了过渡效果
    config.isRemove = true
    if (isClick) {
      mainContainer.removeChild(messageContainer)
      _resetMianPosition(mainContainer)
      free()
    } else {
      setTimeout(() => {
        mainContainer.removeChild(messageContainer)
        _resetMianPosition(mainContainer)
        free()
      }, 400)
    }
  }

  // 销毁重置绑定
  function free() {
    config.els = null
    config.elsAgainBtn = null
    config.destory = null
  }

  return config
}

function _toBindEvents(domConfig, _self) {
  if (!domConfig) {
    return
  }
  // 不再提示按钮的事件绑定
  if (domConfig.againBtn && domConfig.elsAgainBtn) {
    // 鼠标点击：将内容记录下来，下次就不显示同内容的弹框
    domConfig.elsAgainBtn.onclick = () => {
      clearTimeout(domConfig.timeout)
      let sessionJson = sessionStorage.getItem('MESSAGE_DONT_REMIND_AGAIN')
      let tempArr = sessionJson ? JSON.parse(sessionJson) : []
      let dontRemindAgainList = Array.isArray(tempArr) ? tempArr : []
      dontRemindAgainList.push(domConfig.content)
      sessionStorage.setItem(_self.sessionStorageName, JSON.stringify(dontRemindAgainList))
      domConfig.destory(_self.mainContainer, true)
    }
  }

  // 鼠标移入：对销毁计时器进行销毁
  domConfig.els.onmouseover = () => {
    clearTimeout(domConfig.timeout)
  }
  // 鼠标移出： 一秒后销毁当前message
  domConfig.els.onmouseout = () => {
    domConfig.timeout = setTimeout(() => {
      domConfig.destory(_self.mainContainer)
      clearTimeout(domConfig.timeout)
    }, 1000)
  }

  // 延时隐藏
  domConfig.timeout = setTimeout(() => {
    domConfig.destory(_self.mainContainer)
    clearTimeout(domConfig.timeout)
  }, domConfig.duration)
}

function _resetMianPosition(mainContainer) {
  if (!mainContainer) {
    return
  }
  mainContainer.style.left = `calc(50vw - ${mainContainer.scrollWidth / 2}px)`
}

class messageControl {
  constructor() {
    this.minWidth = 380 // 内容显示宽度：最小值
    this.maxWidth = 800 // 内容显示宽度：最大值
    this.top = 45 // 整体的最顶部距离
    this.zIndex = 999 // 层级
    this.mainContainerIdName = 'selfDefine-message-box' // 主体DOM的id名
    this.sessionStorageName = 'MESSAGE_DONT_REMIND_AGAIN' // 存储session信息的key
    /**生成主体DOM、样式容器 */
    let mainDom = document.getElementById(this.mainContainerIdName)
    if (mainDom) {
      document.body.removeChild(mainDom)
    }
    this.mainContainer = createDom({ isId: true, name: this.mainContainerIdName, tag: 'div' })
    this.mainContainer.style = `
    pointer-events:none;
    position:fixed;
    top:${this.top}px;
    left:calc(50vw - ${this.minWidth / 2}px);
    z-index:${this.zIndex};
    display: flex;
    flex-direction: column;
    align-items:center;
    `
    document.body.appendChild(this.mainContainer)
  }

  /**
   * 消息提示
   * @param {String} type 类型 | 必传 | 可选值：message success error warning
   * @param {String} content 内容 | 必传 | ''
   * @param {Number} duration 显示时间 | 非必传 | 默认3000毫秒
   * @param {Number} delay 出现的延时 | 非必传 | 默认0
   * @param {Boolean} againBtn 是否显示 不再提示 按钮 | 非必传 | 默认false
   */
  message(config = {}) {
    // 不再提示（相同文字内容）的存储与判断逻辑待优化
    let sessionJson = sessionStorage.getItem(this.sessionStorageName)
    let dontRemindAgainList = sessionJson ? JSON.parse(sessionJson) : null
    // 需要显示不再提示按钮，且内容有效，且不再提示的记录数组中包含本次内容，则不提示
    if (config.againBtn && config.content && dontRemindAgainList && Array.isArray(dontRemindAgainList) && dontRemindAgainList.includes(config.content)) {
      return
    }

    const domConfig = createMessage(
      {
        type: config.type,
        content: config.content,
        duration: config.duration,
        delay: config.delay,
        againBtn: config.againBtn,
        minWidth: this.minWidth,
        maxWidth: this.maxWidth
      },
      this.mainContainer
    )
    this.mainContainer.appendChild(domConfig.els)
    domConfig.els.style.marginTop = '20px' // 为了过渡效果
    _resetMianPosition(this.mainContainer)
    _toBindEvents(domConfig, this)
  }

  beforeDestory() {
    if (this.mainContainer && this.mainContainer.remove) {
      this.mainContainer.remove()
    } else {
      document.body.removeChild(this.mainContainer)
    }
    this.mainContainer = null
  }
}

export { MessageType, messageControl }
2.在全局或者需要使用的地方引入并绑定
2.1局部使用
// 引入
import { messageControl } from '@/views/components/messageDialog/messageDialog.js'
// 初始化绑定
this.messageComponent = new messageControl()
// 调用
this.messageComponent.message({ content: '这里是内容' })
2.2全局使用
// 如Vue的main.js
// 引入
import { messageControl } from '@/views/components/messageDialog/messageDialog.js'
// 初始化绑定
const notifyCompoent = new messageControl()
Vue.prototype.$selfMessage = notifyCompoent.message.bind(notifyCompoent)
// 调用
this.$selfMessage({ content: '这里是内容' })

注意

icon使用时，注意className，尤其是图标的来源（此处是使用了element-ui框架，所以直接用的ui框架中的）。

结合vue自己写一个类似的消息提示框：此处是连接(简易版)

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！

前端-如此如此。
关注
  • 11
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
msg.reader:JavaScript中的Outlook项目文件（.msg）阅读器
05-12
味精阅读器 MSG Reader是使用HTML5构建的Outlook项目文件（.msg）阅读器。 允许从.msg文件中解析和提取必要的信息（包括附件）。 在线演示
message.js:简单消息使用
05-09
消息js 安装 npm install message-js var Message = require('message-js'); 如果不使用browerify / webpack，则只需复制message.js和message.css。 请参阅example文件夹中的example 。 用法 var message = Message ( ) ; // returns the same message obj every time. // use this to create new message each time message . create ( { _class : 'message--error' , header : 'Error' , body : 'Something bad happened.' , } ) . open (
原生JS消息提示插件Message.js
03-22 1916
插件描述：一款优雅的页面消息提示插件，兼容性良好，无任何依赖。 Qmsg 消息提示插件 使用 兼容IE>=9。 HTML <link rel="stylesheet" href="./css/message.css"> <!-- your html --> <script src="./js/message.js"></script> <script> var configs = {}; // configs 为配置参
原生js实现自定义消息提示框
最新发布
灰海
02-28 438
原生js实现自定义消息提示框
纯JS编写message插件（TS）
weixin_50368372的博客
11-29 488
逻辑： 利用 document.createElement 实时生成组件插入到 Html 中。方法包含了情景式的交互，可以自行更改 icon，下面开始对组件进行美化。
收藏三款好看的信息弹出框
sunshijiazu的博客
06-08 4276
个人收藏系列
纯js消息弹窗组件Message
weixin_45946494的博客
05-22 1850
js消息弹窗组件 文章目录js消息弹窗组件1. js部分代码2.使用方法3.演示效果 写组件上瘾，今天写一个纯js消息弹窗组件，复制即可使用，css也写在了js之中，用js生成，代码若是存在不足的地方可以探讨一些，本人也是前端新人┭┮﹏┭┮ 1. js部分代码 (function(win) { const createDom = (className = '', tag = 'div') => { const ele = document.createElement(tag
JavaScript信息提示类库jsMessage.zip
07-19
js Message 是一个轻量级的 JavaScript 类库，经 gzip 压缩后仅有3kb大小，且不依赖于其他任何框架。它除了能实现信息提示效果外，还支持创建 alert、confirmed 等弹出窗口。它的定制性也比较高，通过参数可设置信息提示的位置、显示时效等，信息提示的外观也能完全自定义。对浏览器的兼容性也比较高，除了IE6之外的大多数浏览器都支持。 标签：jsMessage
原生JS实现消息提示框
alllliy的博客
08-19 721
暂无
原生js自定义提示框
睡觉不打呼噜的博客
06-15 1626
原生js自定义提示框 本作者将文件命名为: showTips.js 在页面中引入 showTips.js 效果图如下： 描述一下： 原生的alert()弹框不太美观，又不想因为一个 提示框 引入其他的框架， 所以自己用原生js实现一个简单的 提示框 。 使用： 基本使用： showTips(); 有参数使用： var obj = { title:"提示框", //标题 可选 也是默认值 infoTips:"hi", //提示消息 可选 也是默认值 duration:800, //消失时间 可
原生js信息提示框（非dialog）
weixin_52065173的博客
10-27 521
原生js信息提示框（非dialog）
原生JS Alert提示框
woaipaiqiu的专栏
06-08 1852
javascript实现的三类弹出框
仿element plus实现的MEssage信息提示的组件
11-10
博主在使用 TypeScript、Vue 3 和 Vite 搭建的项目中，深入研究并成功实现了类似 Element Plus 中的 Message 信息提示功能，该自定义消息提示组件具有丰富的特性。首先，博主通过精心设计和开发，在消息提示组件中加入了三种色彩展示，分别对应正确的信息提示、失败的信息提示和警告的信息提示，以及普通信息提示。这样的设计使得用户在接收不同类型的消息时能够一目了然地识别消息的重要程度，从而更好地处理相应的情况。 除了色彩展示外，博主还考虑到了用户对消息展示时间的需求，通过传递参数的方式，使得消息提示的展示时间可以自由设定。这种设计理念体现了博主对用户体验的关注，用户可以根据实际场景调整消息展示时间，从而更好地平衡提示信息的传达和页面干扰的关系。 在技术实现方面，博主充分利用了 Vue 3 的新特性，采用 Composition API 来管理组件内部的状态和生命周期，结合 TypeScript 的类型系统，使得消息提示组件的代码更加健壮和可维护。同时，利用 Vite 提供的现代化开发环境，博主得以高效地进行开发和调试，享受到了热更新等诸多优势，大大提升了开发
原生JavaScript实现Tooltip浮动提示框特效
10-20
主要为大家详细介绍了原生JavaScript设计和实现Tooltip浮动提示框特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于js的web系统消息提醒小示例（附源码）
03-21
基于js的web系统消息提醒小示例（附源码）。
js应用的短消息提醒,类似QQ/MSN
03-01
js应用的短消息提醒,类似QQ/MSN<br>js应用的短消息提醒,类似QQ/MSN<br>js应用的短消息提醒,类似QQ/MSN<br>很棒很漂亮的！
js消息提醒 右下角弹出
03-01
JS 消息提醒JS 消息提醒JS 消息提醒JS 消息提醒
js穿梭框 实现_JS 原生穿梭框代码
05-16
JS原生实现穿梭框可以使用HTML的select标签和一些JavaScript代码实现。以下是一个基本的穿梭框代码示例： ```html <!DOCTYPE html> <html> <head> <title>JS穿梭框</title> <meta charset="utf-8"> </head> <body> <label>选择：</label> <select id="select1" multiple="multiple" style="width:200px;height:200px;"> <option value="1">选项1</option> <option value="2">选项2</option> <option value="3">选项3</option> <option value="4">选项4</option> <option value="5">选项5</option> </select> <button onclick="moveLeft()">←</button> <button onclick="moveRight()">→</button> <select id="select2" multiple="multiple" style="width:200px;height:200px;"> </select> <script type="text/javascript"> function moveLeft() { var select1 = document.getElementById("select1"); var select2 = document.getElementById("select2"); for (var i = 0; i < select2.options.length; i++) { if (select2.options[i].selected) { select1.appendChild(select2.options[i]); i--; } } } function moveRight() { var select1 = document.getElementById("select1"); var select2 = document.getElementById("select2"); for (var i = 0; i < select1.options.length; i++) { if (select1.options[i].selected) { select2.appendChild(select1.options[i]); i--; } } } </script> </body> </html> ``` 在这个代码中，我们使用了两个select标签，一个是源选项，另一个是目标选项。通过点击左右移动按钮，我们可以将一个或多个选项从一个select标签移动到另一个select标签中。这个代码只是一个基本的示例，你可以根据自己的需要进行修改和扩展。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值