vue3中ElMessage如何动态更改提示消息

1.需求

要求ElMessage的提示消息做成倒计时的效果

2.效果

3.实现代码

javascript 复制代码
function shower(){
    const message = ElMessage({
            type: 'warning', // 提示类型
            dangerouslyUseHTMLString: true, // 使用 HTML 片段作为正文内容
            message: `<div id="kanno"><span>不敢吃太饱.zip-还剩余6分钟</span></div>`, // 提示内容
            duration: 0 // 取消自动关闭提示
        })
}
function kanno(){
    const kannoElement = document.getElementById('kanno');

    // 移除 span 标签
    kannoElement.querySelector('span').remove();

    // 重新插入一个新的 span 标签
    kannoElement.insertAdjacentHTML('beforeend', `<div id="kanno"><span>不敢吃太饱.zip-还剩余2分钟</span></div>`)
}

4.说明

我这里这个两个方法是通过按钮点击事件触发,如需实现倒计时就通过定时器和监听或者计算属性来触发,这里只提供实现的思路。

整个过程的难点在于无法将数据重新渲染到节点上。

shower方法是用来触发消息提示,而kanno方法是用来改变提示内容的方法,可以将该方法中的处理步骤按照需求放在定时器、计算属性、监听等中

整个思路简单来说就是先获取节点,删除节点(删除原来的span),再重新插入节点(插入新的span)

相关推荐
Penk是个码农4 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1016 分钟前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye7 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤11 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子15 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
讨厌吃蛋黄酥1 小时前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil1 小时前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录1 小时前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器