基于Vue2+Element UI或Vue3+Element plus对 el-notification 增加倒计时进度条特效，鼠标移入暂停计时，移出继续计时-Toy模板网

这篇具有很好参考价值的文章主要介绍了基于Vue2+Element UI或Vue3+Element plus对 el-notification 增加倒计时进度条特效，鼠标移入暂停计时，移出继续计时。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

遇到一个需求就是对这个 el-notification 加一个倒计时进度条，方便用户知道该通知何时自动关闭。于是自己动手丰衣足食。

一、示例代码

（1）基于Vue2+ElementUI的项目

<template>
  <div>
    <el-button @click="showTip">do it</el-button>
  </div>
</template>

<script>
export default {
  data: () => ({

  }),
  created() {
    console.log('created =>', 'SUCCESS')

    // 在 created 生命周期，调用 method 的 yyyyyy 方法
    // this.yyyyyy();
  },
  methods: {
    /**
     * 通知消息
     */
    showTip() {
      const h = this.$createElement;
      const contents = []
      const msg = h('p', {}, '任务启动成功！')
      const task = h('p', {}, '任务ID：' + 1234)
      const job = h('p', {}, 'JobID：' + 661234)
      const progress = h(
        'div',
        {
          class: {
            'el-progress-plus': true
          },
          style: {
              'width': '230px',
              'height': '6px',
              'background-color': '#5e7ce0',
              'margin-top': '6px',
              'border-radius': '6px',
          },
          percentage: 100
        },
        ''
      )
      const br = h('p', { style: 'width: auto; height: 10px' }, '')
      contents.push(msg)
      contents.push(task)
      contents.push(job)
      contents.push(progress)
      contents.push(br)

      let classID = 1
      let className = 'el-notification-plus' + classID
      // 判断是否已存在该通知元素，以及最多限制生成10000个通知
      while(document.getElementsByClassName(className)[0]) {
        if (classID > 10000) {
          // 无法生成元素
          console.log('无法生成元素')
          break
        } else {
          // 继续累加
          classID++
          className = 'el-notification-plus' + classID
        }
      }

      // 实例化通知
      const notifyInstance = this.$notify({
        title: '一键测试',
        type: 'success',
        customClass: className,
        message: h('div', {}, contents),
        duration: 0
      })

      // 启动倒计时
      let timer = this.countDown(className, notifyInstance)

      // 获取 Notification 的DOM元素
      const ElNotificationPlus = document.getElementsByClassName(className)[0]
      // console.log('ElNotificationPlus =>', ElNotificationPlus)

      // 为 Notification 元素 定义鼠标进入方法，暂停倒计时
      ElNotificationPlus.onmouseenter = () => {
        console.log('onmouseover~', className)
        clearInterval(timer)
      }

      // 为 Notification 元素 定义鼠标移出方法，继续倒计时
      ElNotificationPlus.onmouseleave = () => {
        console.log('onmouseout~', className)
        clearInterval(timer)
        timer = this.countDown(className, notifyInstance)
      }
    },

    /**
     * 倒计时
     */
    countDown(className, notifyInstance) {
      const timer = setInterval(() => {
        try {
          if (notifyInstance) {
            const ElNotificationPlus = document.getElementsByClassName(className)[0]
            // console.log('ElNotificationPlus =>', ElNotificationPlus)
            const ElProgressPlus = ElNotificationPlus.getElementsByClassName('el-progress-plus')[0]
            // console.log('ElProgressPlus =>', ElProgressPlus)

            let percentage = ElProgressPlus.getAttribute('percentage')
            if (percentage >= 0) {
              percentage = percentage - 0.5
              ElProgressPlus.setAttribute('percentage', percentage)
              ElProgressPlus.style.width = (230 * (percentage / 100)) + 'px'
            } else {
              // 清除定时器
              clearInterval(timer)

              // 手动关闭通知
              setTimeout(() => {
                notifyInstance.close()
              }, 50);
            }
          } else {
            // 清除定时器
            clearInterval(timer)
          }
        } catch (error) {
          // 清除定时器
          clearInterval(timer)
        }
      }, 50)

      return timer
    },
  }
}
</script>

<style>
  .el-notification-plus .el-progress .el-progress__text{
    display: none;
  }
</style>

（1）基于Vue3+ElementPlus的项目

<template>
  <div>
    <el-button @click="showTip">do it</el-button>
  </div>
</template>

<script>
import { h, onMounted, getCurrentInstance } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('onMounted =>', 'SUCCESS')

      // const { proxy  } = getCurrentInstance()

      // 在 onMounted 生命周期，调用 method 的 xxxxxx 方法
      // proxy.xxxxxx()
    })
  },
  data: () => ({

  }),
  created() {
    console.log('created =>', 'SUCCESS')

    // 在 created 生命周期，调用 method 的 yyyyyy 方法
    // this.yyyyyy();
  },
  methods: {
    /**
     * 通知消息
     */
    showTip() {
      const contents = []
      const msg = h('p', {}, '任务启动成功！')
      const task = h('p', {}, '任务ID：' + 1234)
      const job = h('p', {}, 'JobID：' + 661234)
      const progress = h(
        'div',
        {
          class: {
            'el-progress-plus': true
          },
          style: {
              'width': '230px',
              'height': '6px',
              'background-color': '#5e7ce0',
              'margin-top': '6px',
              'border-radius': '6px',
          },
          percentage: 100
        },
        ''
      )
      const br = h('p', { style: 'width: auto; height: 10px' }, '')
      contents.push(msg)
      contents.push(task)
      contents.push(job)
      contents.push(progress)
      contents.push(br)

      let classID = 1
      let className = 'el-notification-plus' + classID
      // 判断是否已存在该通知元素，以及最多限制生成100个通知
      while(document.getElementsByClassName(className)[0]) {
        if (classID > 100) {
          // 无法生成元素
          console.log('无法生成元素')
          break
        } else {
          // 继续累加
          classID++
          className = 'el-notification-plus' + classID
        }
      }

      // 实例化通知
      const notifyInstance = this.$notify({
        title: '一键测试',
        type: 'success',
        customClass: className,
        message: h('div', {}, contents),
        duration: 0
      })

      // 启动倒计时
      let timer = this.countDown(className, notifyInstance)

      // 获取 Notification 的DOM元素
      const ElNotificationPlus = document.getElementsByClassName(className)[0]
      // console.log('ElNotificationPlus =>', ElNotificationPlus)

      // 为 Notification 元素 定义鼠标进入方法，暂停倒计时
      ElNotificationPlus.onmouseenter = () => {
        console.log('onmouseover~', className)
        clearInterval(timer)
      }

      // 为 Notification 元素 定义鼠标移出方法，继续倒计时
      ElNotificationPlus.onmouseleave = () => {
        console.log('onmouseout~', className)
        clearInterval(timer)
        timer = this.countDown(className, notifyInstance)
      }
    },

    /**
     * 倒计时
     */
    countDown(className, notifyInstance) {
      const timer = setInterval(() => {
        try {
          if (notifyInstance) {
            const ElNotificationPlus = document.getElementsByClassName(className)[0]
            // console.log('ElNotificationPlus =>', ElNotificationPlus)
            const ElProgressPlus = ElNotificationPlus.getElementsByClassName('el-progress-plus')[0]
            // console.log('ElProgressPlus =>', ElProgressPlus)

            let percentage = ElProgressPlus.getAttribute('percentage')
            if (percentage >= 0) {
              percentage = percentage - 0.5
              ElProgressPlus.setAttribute('percentage', percentage)
              ElProgressPlus.style.width = (230 * (percentage / 100)) + 'px'
            } else {
              // 清除定时器
              clearInterval(timer)

              // 手动关闭通知
              setTimeout(() => {
                notifyInstance.close()
              }, 50);
            }
          } else {
            // 清除定时器
            clearInterval(timer)
          }
        } catch (error) {
          // 清除定时器
          clearInterval(timer)
        }
      }, 50)

      return timer
    },
  }
}
</script>

<style>
  .el-notification-plus .el-progress .el-progress__text{
    display: none;
  }
</style>

二、运行效果

elnotification 进度条,vue.js,javascript

三、参考资料

JS DOM获取元素属性+操作方法
Vue2的h函数(createElement)与Vue3中的h函数用法文章来源地址https://www.toymoban.com/news/detail-594945.html

到了这里，关于基于Vue2+Element UI或Vue3+Element plus对 el-notification 增加倒计时进度条特效，鼠标移入暂停计时，移出继续计时的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！