导入 useCountDown 钩子函数
import { useCountDown } from '@vant/use'
直接上代码：
<script setup>
import { ref } from 'vue'
import { useCountDown } from '@vant/use'
const counting = ref(false)
const countDown = useCountDown({
time: 60 * 1000, // 设置倒计时的总时长为60秒
millisecond: true,
onChange: () => {
if (current.value.seconds === 0) {
counting.value = false
}
console.log(current.value.seconds, counting.value)
// 在倒计时开始时执行的操作
},
onFinish: () => {
console.log('倒计时结束')
}
})
const current = ref(countDown.current)
const startCountDown = () => {
counting.value = true
console.log(counting.value)
countDown.start()
}
</script>
<template>
<div class="home-wrap">
<van-button type="primary" :disabled="counting" @click="startCountDown">
{{ current.seconds > 0 ? `${current.seconds}s` : '获取验证码' }}
</van-button>
</div>
</template>
在上面的代码中，我们使用 ref 创建了 current 和 counting 变量，分别用于存储倒计时的剩余时间和计数状态。然后，我们使用 useCountDown 钩子函数的 start 方法来启动倒计时。
在onChange回调函数中监听计数，并重置counting。
在模板中，我们使用 :disabled 绑定 counting 变量到按钮的 disabled 属性上。这样，当 counting 为 true 时，按钮将处于禁用状态，用户无法点击。只有当倒计时结束后，current 变量为 0 时，按钮才会可用。
useCountDown这个组合式api是真好用，节省了我们写定时器的代码，以上就是今日分享的文章，晚安啦！！
原文始发于微信公众号（大前端编程教学）：Vue3+Vant4.x使用useCountDown实现倒计时
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/224079.html
