Vue Element-UI 倒计时MessageBox的实现

需求：在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的状态判断是否有用户操作，并执行后面对应的操作，完成对功能的细微调整。

文章记录学习和解决问题过程，望大神指证