Realize o prompt de mensagem com contagem regressiva com base no Element UI ou Element Plus

Acabei de encontrar a necessidade de fechar automaticamente o prompt de mensagem, mas a estrutura do Element não implementou essa função por enquanto. Eu não fazia ideia no início, então procurei nos artigos do blog de colegas taoístas, e vi que havia um artigo que realizava essa função, então aperfeiçoei essa técnica aqui. O método de habilidade aprimorado oferece suporte a vários cliques, instancia vários prompts de mensagem e cada prompt de mensagem tem sua própria contagem regressiva. E pode ser implementado na estrutura Element UI ou Element Plus.

1. Crie um novo arquivo primeiro

/src/utils/elementUtil.ts

2. Implementação no framework Element UI

import { Message } from 'element-ui'

let timer = null

/**
 * 倒计时 Message 方法
 */
function coutdownTime(msgObj, message, number) {
  timer = setTimeout(() => {
    if (number > -1) {
      msgObj.message = `${message} ${number}s 后将自动关闭`,
      --number
      coutdownTime(msgObj, message, number)
    } else {
      msgObj.close()
      timer = null
    }
  }, 1000)
}

/**
 * 自动关闭 Message 方法
 */
function handleAutoCloseMessage(message, type, number, showClose) {
  const msgObj = Message(
    {
      message: `${message} ${number}s 后将自动关闭`,
      type: type,
      duration: 0,
      showClose: showClose,
    }
  )
  number--
  coutdownTime(msgObj, message, number)
}

Vue.prototype.$handleAutoCloseMessage = handleAutoCloseMessage

3. Implementação na estrutura Element Plus

import { ElMessage } from 'element-plus'

// 自动关闭定时器
let timer = null

/**
 * 倒计时 Message 方法
 */
 const coutdownTime = (msgObj: any, className: string,  message: string, number: number) => {
  timer = setTimeout(() => {
    if (number > -1) {
      msgObj.message = `${message} ${number}s 后将自动关闭` // element-ui 可起效，element-plus 不起效

      const parentDom = document.getElementsByClassName(className)[0]
      const childDom = parentDom.querySelectorAll('p')[0]
      childDom.innerHTML = `${message} ${number}s 后将自动关闭`
      
      --number
      coutdownTime(msgObj, className, message, number)
    } else {
      msgObj.close()
      timer = null
    }
  }, 1000)
}

/**
 * 自动关闭 Message 方法
 */
function handleAutoCloseMessage(message: string, type: any, number: number, showClose: boolean) {
  const randomNum = Math.floor(Math.random() * 10000)
  const className = `el-msg__${randomNum}`

  const msgObj = ElMessage(
    {
      message: `${message} ${number}s 后将自动关闭`,
      type: type,
      duration: 0,
      showClose: showClose,
      customClass: className,
    }
  )
  number--
  coutdownTime(msgObj, className, message, number)
}

export {
  handleAutoCloseMessage,
  // ...
}

4. Como usar

(1) Se for um projeto do framework Element UI, pode ser usado diretamente em qualquer página vue

this.$handleAutoCloseMessage('哈哈哈哈哈哈', 'error', 10, true)

(2) Para o projeto da estrutura Element Plus, primeiro introduza a ferramenta elementUtil em main.ts e configure-a como um método global e, em seguida, use-a diretamente em qualquer página vue

import * as elementUtil from '@/utils/elementUtil'
app.config.globalProperties.$elementUtil = elementUtil

this.$elementUtil.handleAutoCloseMessage('HelloWorld ~!', 'success', 5, true)

5. Referências

https://blog.csdn.net/qq_43490372/article/details/112918190

Seis, o efeito é o seguinte ~