首先，确保你已经安装了 Vant4 和 Vue.js。你可以通过 npm 或 yarn 安装：
npm install vant@next
# 或
yarn add vant@next
然后，在你的 Vue 组件中，可以像这样使用 CountDown 组件：
<template>
<div>
<!-- 使用 vant-count-down 组件 -->
<van-count-down
v-model="time"
:millisecond="false"
:format="formatCountDown"
@change="handleChange"
@finish="handleFinish"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { CountDown } from 'vant';
export default {
components: {
[CountDown.name]: CountDown,
},
setup() {
// 使用 ref 创建一个响应式变量，用于设置倒计时的初始时间
const time = ref(60 * 1000); // 初始时间为60秒，单位是毫秒
// 自定义格式化函数，返回要显示的文本内容
const formatCountDown = (time) => {
const seconds = Math.floor(time / 1000);
return `${seconds}s 后重新获取`;
};
// 倒计时变化时的回调函数
const handleChange = (current) => {
console.log('倒计时变化：', current);
};
// 倒计时结束时的回调函数
const handleFinish = () => {
console.log('倒计时结束');
};
return {
time,
formatCountDown,
handleChange,
handleFinish,
};
},
};
</script>
在这个例子中，我们使用了 van-count-down 组件，通过 v-model 绑定了一个响应式变量 time，用于设置倒计时的初始时间。通过 :millisecond 属性设置是否启用毫秒级别的计时（这里设置为 false），通过 :format 属性设置自定义格式化函数，返回要显示的文本内容。通过 @change 事件处理倒计时变化时的回调，通过 @finish 事件处理倒计时结束时的回调。
你可以根据具体的需求调整倒计时的时间、样式以及回调逻辑。
转载请注明出处：http://www.zyzy.cn/article/detail/5831/Vant