vue—MessageBox全局弹窗倒计时展示

---

前言

当需要进行全局弹窗倒计时展示时。后端需要的就是在特定的要求时，每个接口都能返回特定的code。而前端需要完成的工作是：
1.在响应拦截器里拦截每个接口code，判断是否进行弹窗显示。
2.如果要倒计时，进行倒计时展示效果。
3.如果同时调用许多接口，保证弹窗只弹出一次。

---

一、在响应拦截器里进行弹窗展示

1.引入element-ui

这一步是在接口的拦截器里进行的，一步命名为request.js或者axios.js文件中
代码如下（示例）：

import { MessageBox } from 'element-ui'

2.判断code并进行弹窗展示

这一步是在响应拦截器里

if (res.code == 436) {
     MessageBox.alert(
       '您好，系统检测到您所属的账号存在异常，详询********。',
       '异常提示',
       {
         confirmButtonText: '知道了',
         dangerouslyUseHTMLString: true,
         closeOnClickModal: false,
         callback: action => {
  			console.log("这里我是跳转到首页，并调用退出登录的接口");
        }
      }
    )
 }

---

二、如果有倒计时功能

这里我是用setInterval实现倒计时功能，用原生写法动态渲染到弹窗上

代码如下（示例）：

if (res.code == 430) {
  let time = 30;
  let timer;
  timer = setInterval(() => {
    time--;
    document.getElementById('timed').innerHTML = time;//实现动态渲染
    if (time == 0) {
      clearInterval(timer);//如果到0清除倒计时
      console.log("这里我是跳转到首页，并调用退出登录的接口");
      document.getElementById('timed').innerHTML = 30;//重新赋为30秒
      MessageBox.close(false);//关闭弹窗
    }
  }, 1000);//进行倒计时
  MessageBox.alert(
    `<div>您的角色权限发生变化，若有疑问，请联系系统管理员；系统将在<span id='timed' style='color: #06B7AE'>30</span>s后退出，重新登录后方可正常使用。</div>`,
    '角色权限变更提醒',
    {
      confirmButtonText: '重新登录',
      dangerouslyUseHTMLString: true,
      closeOnClickModal: false,
      callback: action => {
        clearInterval(timer);//如果点击清除倒计时
        console.log("这里我是跳转到首页，并调用退出登录的接口");
        document.getElementById('timed').innerHTML = 30;//重新赋为30秒
      }
    }
  )
}

---

三、保证弹窗只弹出一次

在仓库里面存储一个值，默认为true，第一次调用接口出现该code时就把值改成false。然后在弹窗哪里判断该值为true还是false

代码如下（示例）：

if (res.code == 430) {
   let time = 30;
   let timer;
   timer = setInterval(() => {
     time--;
     document.getElementById('timed').innerHTML = time;//实现动态渲染
     if (time == 0) {
       clearInterval(timer);//如果到0清除倒计时
       console.log("这里我是跳转到首页，并调用退出登录的接口");
       MessageBox.close(false);//关闭弹窗
       document.getElementById('timed').innerHTML = 30;//重新赋为30秒
     }
   }, 1000);
   if (store.getters.numbve) { //判断仓库里的值如果为true那么证明是第一次调用，就弹出弹窗
     store.dispatch('user/changenumbve', false);//仓库里的值赋为false
     MessageBox.alert(
       `<div>您的角色权限发生变化，若有疑问，请联系系统管理员；系统将在<span id='timed' style='color: #06B7AE'>30</span>s后退出，重新登录后方可正常使用。</div>`,
       '角色权限变更提醒',
       {
         confirmButtonText: '重新登录',
         dangerouslyUseHTMLString: true,
         closeOnClickModal: false,
         callback: action => {
           clearInterval(timer);//如果点击清除倒计时
           console.log("这里我是跳转到首页，并调用退出登录的接口");
           document.getElementById('timed').innerHTML = 30;//重新赋为30秒
         }
       }
     )
   } else {
     clearInterval(timer);
   }
 }

效果图如下：