刚好遇到一个需要自动关闭消息提示的需求，可Element框架暂时没有实现这个功能。开始时没有头绪，于是搜一下道友的博客文章，看到有一篇文章实现了这个功能，在此我完善了一下这个技巧方法。完善后的技巧方法支持多次点击，实例化多个消息提示，每个消息提示都具有自己的倒计时。以及可在Element UI或Element Plus框架上实现。
一、首先新建文件
/src/utils/elementUtil.ts二、在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
三、在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,
// ...
}
四、使用方式
（1）若是Element UI框架的项目中，直接在任意一个 vue 页面中使用
this.$handleAutoCloseMessage('哈哈哈哈哈哈', 'error', 10, true)（2）若是Element Plus框架的项目中，先在 main.ts 中引入 elementUtil 工具并配置为全局方法，然后直接在任意一个 vue 页面中使用
import * as elementUtil from '@/utils/elementUtil'
app.config.globalProperties.$elementUtil = elementUtilthis.$elementUtil.handleAutoCloseMessage('HelloWorld ~!', 'success', 5, true)五、参考资料
https://blog.csdn.net/qq_43490372/article/details/112918190
六、效果如下 ~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/151122.html
