vue实现60秒倒计时

最新推荐文章于 2024-07-07 15:27:08 发布

m0_46815188

最新推荐文章于 2024-07-07 15:27:08 发布

阅读量2.8k

点赞数

分类专栏：开发经验文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/m0_46815188/article/details/120779853

版权

本文详细介绍了如何使用Vue.js实现一个60秒的倒计时功能，包括在`el-button`组件的配置，数据属性的定义以及在`methods`中的倒计时函数实现。

摘要由CSDN通过智能技术生成

1、el-button的设置

<el-button 
type="primary"
:disabled="sendModel.countFlag" 
@click="getCode">
{
  {sendModel.btnMsg == null ? sendModel.countNum+'s后重新发送' : sendModel.btnMsg}}
</el-button>

2、设置data里面关于到计时的数据

 sendModel: {
        // 倒计时周期
        countNum: 60,
        // 用于倒计时标记，true-正在倒计时
        countFlag: false,
        // 定时器
        intervalBtn: { },
        // 默认按钮的值
        btnMsg: '获取验证码'
}

3、methods中函数的定义

// 获取短信验证码，并且实现60秒后 countDown()和getCode()
// 倒计时
countDown () {
    // 设置btn倒计时时显示的信息
      this.sendModel.btnMsg = null
      // 更改btn状态
      this.sendModel.countFlag = !this.sendModel.countFlag
      // 设置倒计时
      this.sendModel.intervalBtn = setInterval(() => {
        if (this.sendModel.cou