基于vue3实现倒计时60s的

短信倒计时60s

使用vue3的computed盘算属性

1.    <n-button type="primary" :disabled="btnDisabled" @click="handleClick">
2.             {{Countdown}}
3.      </n-button>
4.      <n-input v-model:value="model.inputSign" placeholder="请输入验证码" clearable/>

复制代码

1.     const btnDisabled = ref(false)
2.     const second = ref(null)
3.     const timer = ref(null)
5.     //计算属性实时更新
6.     const Countdown = computed(() => btnDisabled.value ? `重新获取 ( ${second.value} ) s` : '获取验证码')
7.                 //获取验证码
8.                 handleClick() {
9.                        //简单节流
10.                     if (btnDisabled.value) {
11.                         return
12.                     }
13.                     getCode()
14.                 },
16.                 // 倒计时效果
17.                 getCode() {
18.                     let s = 60  //倒计时间
19.                     if (!timer.value) {
20.                         second.value = s
21.                         btnDisabled.value = true
22.                         timer.value = setInterval(() => {
23.                             if (second.value > 0 && second.value <= s) {
24.                                 second.value--
25.                             } else {
26.                                 btnDisabled.value = false
27.                                 clearInterval(timer.value)
28.                                 timer.value = null
29.                             }
30.                         }, 1000)
31.                     }
32.                 }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。