使用Vue+elementUI制作倒计时关闭提示框
这里写自定义目录标题使用Vue+elementUI制作倒计时关闭提示框弹出框倒计时逻辑关闭当前页面总结使用Vue+elementUI制作倒计时关闭提示框话说在前,因工作需求要做一个带倒计时关闭的提示框,百度了一些都没有完整的特别合适的demo,于是自己写了一个,望大神们指点。弹出框其实从业务角度来讲仿佛使用MessageBox更合适,但是我们要在弹出框中加入逻辑,于是我在这里选择了el-dialo
·
这里写自定义目录标题
使用Vue+elementUI制作倒计时关闭提示框
话说在前,因工作需求要做一个带倒计时关闭的提示框,百度了一些都没有完整的特别合适的demo,于是自己写了一个,望大神们指点。
弹出框
其实从业务角度来讲仿佛使用MessageBox更合适,但是我们要在弹出框中加入逻辑,于是我在这里选择了el-dialog,以下为代码:
<el-dialog
title="提示"
:visible.sync="Successdialog"
:show-close= false //不要小叉叉关闭
:close-on-click-modal= true //不要点击遮罩层关闭
:close-on-press-escape= false //不要esc关闭
width="30%" //宽度
center>
<span style="font-size:18px;">他不喜欢我女装制作!{{Sencond}}秒后关闭页面。</span> //这里是弹出框正文的内容,{{Sencond}}就是我们的倒计时data拉
<span slot="footer" class="dialog-footer"> //footer这里我只保留了一个按键,大家自由发挥
<el-button @click="sendMsg" type="primary" :disabled="isDisabled">立即关闭</el-button>
</span>
</el-dialog>
data () {
return {
Successdialog: false,//控制弹出
Sencond: 5,//设置初始倒计时
isDisabled: false
}
}
倒计时逻辑
getSencond () {
const that = this
const interval = window.setInterval(function () {
--that.Sencond
if (that.Sencond === 0) {
that.isDisabled = false
window.clearInterval(interval)
that.sendMsg()//倒计时结束时运行的业务逻辑,这里的是关闭当前页面
}
}, 1000)
}
关闭当前页面
sendMsg () {
window.close()
}
总结
ok啦,这就是一个倒计时关闭页面提示框的整体的逻辑,第一次写博客不太会表述原理,代码现成的拿去用就好,欢迎大家批评指正
更多推荐
已为社区贡献1条内容
所有评论(0)