论坛 › DevOps与敏捷开发 › 基于vue3实现倒计时60s的

万万哇 发表于 2024-6-19 22:42:50

基于vue3实现倒计时60s的

短信倒计时60s

使用vue3的computed盘算属性
   <n-button type="primary" :disabled="btnDisabled" @click="handleClick">
            {{Countdown}}
   </n-button>
   <n-input v-model:value="model.inputSign" placeholder="请输入验证码" clearable/>     const btnDisabled = ref(false)
    const second = ref(null)
    const timer = ref(null)

    //计算属性实时更新
    const Countdown = computed(() => btnDisabled.value ? `重新获取 ( ${second.value} ) s` : '获取验证码')
                //获取验证码
                handleClick() {
                     //简单节流
                  if (btnDisabled.value) {
                        return
                  }
                  getCode()
                },

                // 倒计时效果
                getCode() {
                  let s = 60//倒计时间
                  if (!timer.value) {
                        second.value = s
                        btnDisabled.value = true
                        timer.value = setInterval(() => {
                            if (second.value > 0 && second.value <= s) {
                              second.value--
                            } else {
                              btnDisabled.value = false
                              clearInterval(timer.value)
                              timer.value = null
                            }
                        }, 1000)
                  }
                }

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

查看完整版本: 基于vue3实现倒计时60s的