实现 ~ 按钮倒计时 ~ 表现

前提：因为一页有两个按钮要做倒计时，且时间、内容不一，就稍微改动了下代码，写了下函数形式，比较方便，比较适应变数
（以下是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>
1
2
3
4
5
6
7
8
9
10
11

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); 
        // 对接接口
        // ...
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34