这里简单介绍下: 使用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)
至此功能完成。有需要的可以查看,谢谢点赞收藏。