Vue2.X+element-UI实现发送验证码后按钮内倒计时

原创已于 2023-04-20 19:58:32 修改 · 1.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #elementui

于 2023-04-15 09:32:15 首次发布

本文介绍了如何在Vue.js应用中利用ElementUI的按钮组件创建一个倒计时功能。当用户点击按钮，启动一个定时器，每秒减少countdown的值，直到变为0，并在视图上实时更新。同时，按钮在倒计时期间会被禁用，防止重复点击。在组件销毁时，确保清除定时器，避免内存泄漏。

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

首先，组件中定义一个变量 countdown，用于存储倒计时的秒数，初始值为 59。

在按钮上添加一个点击事件，当按钮被点击后，启动倒计时。在这个点击事件中，需要设置定时器，每隔一秒钟将 countdown 的值减 1，直到 countdown 的值为零。同时，禁用按钮，以防止用户多次点击。

使用 Element UI 的按钮组件（el-button），将 countdown 的值绑定到按钮上。这样，用户就可以看到倒计时的效果。

确保倒计时数字变化时可以实时更新到视图上面，需要添加以哦个watch来监听倒计时数字的变化

示例代码：
template代码：

<template>
  <el-button :disabled="countdown > 0" @click="startCountdown">
    {{ countdown > 0 ? countdown + '秒' : '发送验证码' }}
  </el-button>
</template>

js代码：

<script>
export default {
  data() {
    return {
      countdown: 0,
      timer: null
    };
  },
  methods: {
    startCountdown() {
      this.countdown = 59;
      this.timer = setInterval(() => {
        if (this.countdown > 0) {
          this.countdown--;
        } else {
          clearInterval(this.timer);
          this.timer = null;
        }
      }, 1000);
    }
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  watch: {
       countdown: {
           handler(newVal) {
               this.countdown = newVal
           }
       }
   }
};
</script>