以下是一个简单的示例，展示如何在 Vue.js 中使用 Vant4 的 useCountDown：
1. 安装 Vant4 和 Vue 3：
确保你已经安装了 Vant4 和 Vue 3，可以使用 npm 或 yarn 安装：
npm install vant@next vue@next --save
# 或
yarn add vant@next vue@next
2. 在你的 Vue 组件中使用 useCountDown：
<template>
<div>
<p>倒计时: {{ countdown }}</p>
<button :disabled="counting" @click="startCountDown">开始倒计时</button>
</div>
</template>
<script>
import { ref, onMounted, useCountDown } from 'vue';
export default {
setup() {
// 使用 ref 创建响应式数据
const countdown = ref(60);
const counting = ref(false);
// 使用 useCountDown 处理倒计时逻辑
const { start, pause, reset } = useCountDown(countdown);
// 定义开始倒计时的函数
const startCountDown = () => {
counting.value = true;
start();
};
// 在组件挂载后重置倒计时
onMounted(() => {
reset();
});
return {
countdown,
counting,
startCountDown
};
}
};
</script>
在上述示例中，我们使用 useCountDown 处理了倒计时逻辑。通过调用 start 函数开始倒计时，countdown 的值会在指定的时间内逐渐减少，当倒计时结束时，counting 的状态会变为 false。
这只是一个简单的示例，你可以根据实际需求定制倒计时的时间、样式和逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/5868/Vant