prefácio
-
A mensagem fornecida pelo elemento é realmente conveniente e pode ser feita diretamente com código. Mas não é aplicável em determinados cenários
-
Clique em um determinado ponto para solicitar que o usuário clique ou websocket push para solicitar que o usuário receba informações (isso solicita o cenário do usuário)
-
Se houver muitas informações push chegando ou se o usuário continuar clicando. Esta é a tela que continuará exibindo avisos de mensagens empilhados
-
Não é amigável e bloqueará a tela. Isso torna a experiência do usuário muito ruim, devemos realizar o processamento anti-vibração nas informações da caixa pop-up
-
E é melhor adicionarmos esse tipo de processamento, para que a mensagem do prompt de mensagem originalmente escrita na página não precise ser modificada duas vezes
código é importante
1. Crie um arquivo resetMessage.js no arquivo utils/tools - o código é o seguinte
/**重置message，防止重复点击重复弹出message弹框 */
import { Message } from 'element-ui'
let messageInstance = null
let mainMessage = function DoneMessage (options) {
//如果弹窗已存在先关闭
if (messageInstance) {
messageInstance.close()
}
messageInstance = Message(options)
}
let arr = ['success', 'warning', 'info', 'error']
arr.forEach(function (type) {
mainMessage[type] = function (options) {
if (typeof options === 'string') {
options = { message: options }
}
options.type = type
return mainMessage(options)
}
})
export const message = mainMessage
2. Introduzir em main.js
// 还是按照之前的写法一样写弹出框信息，但如果一直触发弹出框就只会提示一次，不会在页面堆叠
import { message } from './utils/resetMessage'Resumir:
Após esse processo, acredito que você também tenha uma impressão preliminar profunda sobre o processamento anti-vibração do prompt de mensagem no lado do vue-pc - acionado apenas uma vez em um curto período de tempo, mas a situação que encontramos no desenvolvimento real é definitivamente diferente. Então temos que entender o seu princípio, e ele é sempre o mesmo. Vamos, acerte os trabalhadores!
Por favor, aponte quaisquer deficiências, obrigado – Fengguowuhen