element的 ElMessageBox 倒计时操作

这里简单介绍下： 使用Element-plus组件库中 Feedback 反馈组件（ElMessageBox.confirm），具体需求是在 确定按钮下做一个 自动倒计时，倒计时结束自动触发 确定事件。

页面效果是这样： 倒计时结束自动触发！ 废话不多说直接上代码。

这里使用element-plus组件库，安装使用看官网。 ElMessageBox.confirm 具体使用及配置项 官网都有介绍。
自定义按钮样式使用：

// customClass配置项 是修改此弹框提示的关键， 可在外部引入css文件等 确保可以修改样式。 distinguishCancelAndClose 确保区分开 取消按钮   及 点击遮罩层和叉号的操作。
// 注意：cancelButtonClass  主要声明给取消按钮一个 soleClass 属性。  这里按钮名称是相反的（这里取消的操作是确认回调   确认的操作是取消回调），组件自定义按钮还需 研究

let messageBoxTimer;
let countdown = 60; // 秒数

ElMessageBox.confirm(
  `这里是弹框提示内容  可以是html形成的内容 可加class等，必要属性：dangerouslyUseHTMLString为true`,
  '标题titl',
  {
    confirmButtonText: '取消',
    cancelButtonText: '确认（60）',
    customClass: 'use-message-box-fjshfksj',
    cancelButtonClass: 'el-button--primary soleClass',
    confirmButtonClass: 'el-button--info',
    dangerouslyUseHTMLString: true,
    distinguishCancelAndClose: true,
    autofocus: false,
  }
)
  .then(() => {
    if (messageBoxTimer) clearInterval(messageBoxTimer)
    // 这里是 点击取消的操作（按钮位置调换）
  })
  .catch((action: Action) => {
    if (messageBoxTimer) clearInterval(messageBoxTimer)
    // 点击遮罩层 叉号 esc 等关闭相当于点击取消操作
    if (action === 'close') {
      // 关闭，取消的操作
    }
    // 这里虽然是取消按钮的回调 上方按钮互换了名称
    if (action === 'cancel') {
      // 确定按钮的回调
    }
 })

// 定时器
messageBoxTimer = setInterval(() => {
   if (countdown <= 1) {
     if (messageBoxTimer) clearInterval(messageBoxTimer)
     countdown= 60
     // 倒计时结束 执行事件
     .......
     ElMessageBox.close()  // 关闭弹框
     return
   }
   countdown -= 1
   // 获取demo元素 因为页面可能有多个提示  加唯一标识 soleClass 修改内容
   const domeInfo: any = document.querySelector('.soleClass')
   domeInfo.querySelector('span').remove()
   domeInfo.insertAdjacentHTML(
     'beforeend',
     `<span>确认（${countdown}）</span>`
   )
 }, 1000)

至此功能完成。有需要的可以查看，谢谢点赞收藏。