实现 ~ 按钮倒计时 ~ 表现

4 篇文章 0 订阅

前提:因为一页有两个按钮要做倒计时,且时间、内容不一,就稍微改动了下代码,写了下函数形式,比较方便,比较适应变数
(以下是vue背景下)
HTML:

<div class="radio_title">
     <span class="dot">*</span>
      4.短信验证码
</div>
<van-field v-model="sms" center clearable name="sms" placeholder="请输入短信验证码">
      <template #button>
            <van-button size="small" native-type="button" type="primary" :disabled="sendModel.countFlag" @click="getSms">
                  {{sendModel.btnMsg == null ? sendModel.countNum+'s后可重新发送' : sendModel.btnMsg}}
            </van-button>
       </template>
</van-field>

JS:

data: {
        sms: "",
        sendModel: { // 短信验证码信息
            countNum: 60,
            countFlag: false, 
            intervalBtn: {}, // 定时器
            btnMsg: '获取验证码' 
        },
},

methods: {
	// 倒计时
    countDown(value, time) {
        value.btnMsg = null
        value.countFlag = !value.countFlag // 更改btn状态
        // 设置倒计时
        value.intervalBtn = setInterval(() => {
            if (value.countNum <= 0) {
                value.btnMsg = '获取验证码'
                clearInterval(value.intervalBtn) // 清除定时器
                value.countFlag = !value.countFlag
                value.countNum = time
            };
            // 倒计时
            value.countNum--
        }, 1000)
    },
    getSms() {
        const value = this.sendModel;
        this.countDown(value, 60); 
        // 对接接口
        // ...
    },
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值