需求:在MessageBox对话框中显示倒计时,倒计时结束后默认确定选择
概述
项目需要前端调用接口拨打IP电话,甲方需求在点击拨号的时候弹出确认框,并且显示倒计时,在倒计时结束后自动确认拨打电话。
因为页面多处调用拨打电话方法,所以把拨打电话方法提取出公共方法,单独存放js文件中,所以需要使用服务的方式调用。因此选择Element-UI中的MessageBox。
一、问题发现
通过查看Element-UI中的MessageBox配置项中发现并没有适合的配置属性,而且需要根据倒计时修改读秒数据,所以只能在此基础上做新增功能。
二、解决思路
1.解决显示文字问题
因为是在js文件中处理页面显示文字问题,考虑在显示MessageBox之后,通过js获取dom元素,定时器修改显示内容
document.querySelector(".el-message-box__message").children[0]
2.MessageBox关闭
在倒计时结束后,需要关闭MessageBox。
官方文档中并没有类似Message的方法,通过百度和查看源代码中法现,具有close方法
所以在倒计时结束后调用close方法关闭弹窗。
3.倒计时和手动操作的冲突
因为弹出窗口可以手动关闭和取消,需要考虑在手动操作后停止倒计时,并且把文字恢复为初始状态。
三、问题解决
1.定义全局变量
(1)需要定义全局变量存储MessageBox中的文本内容.
(2)MessageBox的操作状态,分为3种
0:无手动操作
1:确定
2:取消
let tex = null;
let isCall = 0;
2.定义定时器方法
MessageBox.confirm("确认拨打?", "IP电话拨打")
.then(() => isCall = 1)
.catch(() => isCall = 2)
let daojishi = (t) => {
if (isCall == 0) {
t--
if (t >= 0) {
setTimeout(() => {
tex = document.querySelector(".el-message-box__message").children[0]
tex.innerHTML = t + " 秒后自动确认拨打!"
daojishi(t)
}, 1000);
} else {
MessageBox.close()
actCall(number,id)
return
}
} else if (isCall == 1) {
actCall(number,id)
return
} else {
Message.info("取消拨号!")
return
}
}
daojishi(6)
actCall为实际拨打电话方法,number和id为调用拨打电话参数
定义倒计时函数,传入倒计时次数参数,在调用拨号弹窗的时候执行倒计时函数,传入读秒变动次数。
在倒计时过程种通过区分isCall的状态判断是否有用户操作,并执行后面对应的操作,完成对功能的细微调整。
文章记录学习和解决问题过程,望大神指证