前端-发送短信按钮设置六十秒发送

187 阅读1分钟

需求:发送短信的返回成功结果后60内不能触发 解决思路

1655285511415.jpg

1655285518252.jpg 1、设置两个按钮 在点击触发时loading接口返回成功后 2、切换倒计时状态按钮 3、60S结束后切换回发送短信按钮

         1.<van-button
            @click="sendOut"
            v-show="!showButtonELse"
            :loading="listloading"
            size="small"
            type="primary"
            >发送短信</van-button>
              
            <van-button
            size="small"
            type="primary"
            v-if="showButton"
            style="height: 30px"
            >({{ timer }})秒后发送短信</van-button
          >
          
          data里设置初始值time、timer、showButton、showButtonELse
          time(用来设置定时器 用来实现倒计时功能)
          timer(初始值60S)
          showButtonELse:false
          showButton:false
          
              countDown() {
                this.time = setInterval(() => {
                  if (this.timer == 0 || this.timer < 0) {
                      clearInterval(this.time);
                      this.showButton = false;
                      this.showButtonELse = false;
                      this.timer = 60;
                  } else {
                      this.timer--;
                  }
                }, 1000);
              },