Vant3 的 van-count-down 组件可以用于实现倒计时功能。以下是一个简单的例子,演示如何在 Vue 组件中使用 Vant3 的 CountDown:
<template>
  <div>
    <!-- 使用 van-count-down 组件 -->
    <van-count-down
      :time="time"
      :format="format"
      @change="handleChange"
      @finish="handleFinish"
    />
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // time 表示倒计时的时间,单位是毫秒
    const time = ref(60000);

    // format 表示倒计时的显示格式,可以根据需要自定义
    const format = ref('HH:mm:ss');

    // 处理倒计时变化的回调
    const handleChange = (event) => {
      console.log('倒计时变化', event);
    };

    // 处理倒计时结束的回调
    const handleFinish = () => {
      console.log('倒计时结束');
    };

    return {
      time,
      format,
      handleChange,
      handleFinish,
    };
  },
};
</script>

<style>
/* 这是一个简单的样式示例,你可以根据需求自定义样式 */
</style>

在上述代码中,我们使用了 van-count-down 组件,并通过 :time 属性设置倒计时的总时间,单位是毫秒。可以通过 :format 属性设置倒计时的显示格式,这里使用了 'HH:mm:ss' 表示时分秒的格式。

在 @change 事件中,我们可以处理倒计时变化的回调,而 @finish 事件用于处理倒计时结束的回调。你可以根据实际需求自定义这两个回调函数。

确保你的项目已经正确引入了 Vant3 并按照文档配置,以确保组件能够正常工作。


转载请注明出处:http://www.pingtaimeng.com/article/detail/5747/Vant