按钮倒计时

最新推荐文章于 2024-06-11 07:57:19 发布

￥小灰灰

最新推荐文章于 2024-06-11 07:57:19 发布

阅读量103

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/fengwenfei666/article/details/126511963

本文展示了如何在前端使用Vue.js实现发送验证码的倒计时功能。通过修改`canClick`属性和定时器，实现了按钮点击后60秒内禁用并显示倒计时，倒计时结束后恢复功能。

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

<template>
  <div>
  <el-button type="primary" class="button" :disabled="canClick== false ? true : false" @click="countDown">
    {{content}}
  </el-button>
  </div>
</template>

<script>
export default {
  data () {
    return { 
   content: '发送验证码',  // 按钮里显示的内容
   totalTime: 60   ,   //记录具体倒计时时间
   canClick: true //添加canClick
  }
  },
  methods: {
      countDown () {
        if (!this.canClick) return  //改动的是这两行代码
        this.canClick = false
        this.content = this.totalTime + 's后重新发送' //这里解决60秒不见了的问题
        let clock = window.setInterval(() => {
          this.totalTime--
          this.content = this.totalTime + 's后重新发送'
          if (this.totalTime < 0) {     //当倒计时小于0时清除定时器
            window.clearInterval(clock)
            this.content = '重新发送验证码'
            this.totalTime = 60
            this.canClick = true
            }
        },1000)
},
  }
}
</script>

<style scoped>
</style>