{site_name}

{site_name}

🌜 搜索

Vant3 useCountDown 是一个 Vue 组件库 Vant3 中提供的计时器组件,用于实现倒计时功能

前端 𝄐 0
vant36.5洗面奶,vant3 form表单,vant3 indexbar二次封装,vant3 dialog组件点击保持,vant3 van-filed 配合error的用法,vant3 vant-field 兼容性问题
Vant3 useCountDown 是一个 Vue 组件库 Vant3 中提供的计时器组件,用于实现倒计时功能。

使用 useCountDown,可以通过传入目标时间戳和倒计时结束时的回调函数来创建一个倒计时器。组件内部会自动根据当前时间与目标时间戳计算出剩余时间,并返回相应的数据和方法,供开发者使用,比如剩余秒数、倒计时文本、重新开始倒计时等。

以下是一个简单的示例:


<template>
<div>
<p>{{ formatCountdown }}</p>
<button @click="restartCountdown">重新开始倒计时</button>
</div>
</template>

<script>
import { useCountDown } from 'vant';

export default {
setup() {
const [time, setTime] = useState(Date.now() + 60 * 1000); // 目标时间为1分钟后
const { formattedTime, restart } = useCountDown(time, () => alert('倒计时结束'));

function restartCountdown() {
setTime(Date.now() + 60 * 1000); // 重新设置目标时间为1分钟后
restart(); // 重新开始倒计时
}

return {
formatCountdown: computed(() => formattedTime.value), // 格式化后的倒计时文本
restartCountdown,
};
},
};
</script>


在上面的代码中,我们首先通过 useState 创建了一个状态 time,表示倒计时的目标时间戳,这里设置为当前时间加上一分钟。然后使用 useCountDown 创建了名为 formattedTime 和 restart 的两个响应式变量,分别表示格式化后的倒计时文本和重新开始倒计时的函数。最后在模板中将 formatCountdown 显示出来,并在按钮上绑定 restartCountdown 函数,用于重新开始倒计时。

以上就是 Vant3 useCountDown 的简单示例。