element 按钮倒计时

最新推荐文章于 2024-09-13 21:56:50 发布

咆哮着闯红灯

最新推荐文章于 2024-09-13 21:56:50 发布

阅读量3.1k

点赞数 2

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/zykwblx/article/details/129377125

版权

Element UI提供了el-button组件，但是它没有直接支持倒计时的功能。可以通过以下方法实现：

在data数据中定义倒计时时间和是否可用的状态，例如：

data() {
  return {
    disabled: false, // 按钮是否可用
    countDown: 60 // 倒计时时间（单位：秒）
  }
}

在methods中定义开始倒计时和倒计时结束的方法，例如：

methods: {
  startCountDown() {
    this.disabled = true; // 禁用按钮
    let timer = setInterval(() => {
      if (this.countDown > 0) {
        this.countDown--;
      } else {
        clearInterval(timer);
        this.disabled = false; // 启用按钮
        this.countDown = 60; // 重置倒计时时间
      }
    }, 1000);
  }
}

在el-button中绑定点击事件，并调用开始倒计时方法，例如：
```
<el-button :disabled="disabled" @click="startCountDown">{{countDown}}秒后重新发送</el-button>
```
在显示倒计时的文本中，使用插值语法显示剩余倒计时时间。