Vue的倒计时效果实现（element-ui）

最新推荐文章于 2024-06-19 15:01:54 发布

落魄的小影

最新推荐文章于 2024-06-19 15:01:54 发布

阅读量1.4k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45438028/article/details/127799723

版权

对于一个按钮来说，如果想要避免一段时间内，多次发起请求，

除了采用“节流”，还可以借助定时器来实现。

话不多讲，直接看代码：

HTML:

<el-button type="primary" :disabled="state" @click="saveData"> 确定 <span v-if="state">({{stateNum}})</span> </el-button>

data:

state: false,
stateNum: 3,

methods:

saveData () {
      if (!this.state) {
        // 执行网络请求
        this.state = true
        this.stateNum = 3
        let timer = setInterval(() => {
          this.stateNum--
          if (this.stateNum === 0) {
            clearInterval(timer)
            this.state = false
          }
        }, 1000)
      }
    }

码字不易，点赞鼓励。。。