vue.js倒计时功能

最新推荐文章于 2023-05-26 12:03:11 发布

弯腰捡代码

最新推荐文章于 2023-05-26 12:03:11 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/weixin_38655115/article/details/107331546

本文详细介绍了如何使用Vue.js和Element UI实现一个倒计时功能的按钮，包括html代码、data参数定义及js逻辑实现。通过canClick变量控制按钮状态，totalTime记录倒计时时间，同时提供了CSS样式修改建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html代码
<el-button style="width:52%;padding:12px 0px" :class="{disabled: !this.canClick}" class="button" @click="countDown">
  {{content}}
</el-button>

data中定义参数
content: '发送验证码',  // 按钮里显示的内容
totalTime: 60 ,     //记录具体倒计时时间
canClick: true //添加canClick


js中代码
//获取验证码
    countDown() {
      if (!this.canClick) return  //改动的是这两行代码
      this.canClick = false
      this.content = this.totalTime + 's后重新发送'
      let clock = window.setInterval(() => {
        this.totalTime--
        this.content = this.totalTime + 's后重新发送'
        if (this.totalTime < 0) {
        window.clearInterval(clock)
        this.content = '重新发送验证码'
        this.totalTime = 60
        this.canClick = true  //这里重新开启
        }
      },1000)
    }

可以添加一些css.大家可以根据自己的样式来改变
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; 
}