element的 ElMessageBox 倒计时操作
// 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)