基于vue3实现倒计时60s的

最新推荐文章于 2024-08-19 16:42:47 发布

骑450的皮卡丘

最新推荐文章于 2024-08-19 16:42:47 发布

阅读量484

点赞数 2

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/m0_68956554/article/details/139528435

版权

短信倒计时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)
                    }
                }