codecamp

Vant3 useCountDown

介绍

提供倒计时管理能力。

代码演示

基本用法

<span>总时间:{{ current.total }}</span>
<span>剩余天数:{{ current.days }}</span>
<span>剩余小时:{{ current.hours }}</span>
<span>剩余分钟:{{ current.minutes }}</span>
<span>剩余秒数:{{ current.seconds }}</span>
<span>剩余毫秒:{{ current.milliseconds }}</span>
import { useCountDown } from '@vant/use';

export default {
  setup() {
    const countDown = useCountDown({
      // 倒计时 24 小时
      time: 24 * 60 * 60 * 1000,
    });

    // 开始倒计时
    countDown.start();

    return {
      current: countDown.current,
    };
  },
};

毫秒级渲染

倒计时默认每秒渲染一次,设置 millisecond 选项可以开启毫秒级渲染。

import { useCountDown } from '@vant/use';

export default {
  setup() {
    const countDown = useCountDown({
      time: 24 * 60 * 60 * 1000,
      millisecond: true,
    });
    countDown.start();

    return {
      current: countDown.current,
    };
  },
};

API

类型定义

type CurrentTime = {
  days: number;
  hours: number;
  total: number;
  minutes: number;
  seconds: number;
  milliseconds: number;
};

type CountDown = {
  start: () => void;
  pause: () => void;
  reset: (totalTime: number) => void;
  current: ComputedRef<CurrentTime>;
};

type UseCountDownOptions = {
  time: number;
  millisecond?: boolean;
  onChange?: (current: CurrentTime) => void;
  onFinish?: () => void;
};

function useCountDown(options: UseCountDownOptions): CountDown;

参数

参数 说明 类型 默认值
time 倒计时时长,单位毫秒 number -
millisecond 是否开启毫秒级渲染 boolean false
onChange 倒计时改变时触发的回调函数 (current: CurrentTime) => void -
onFinish 倒计时结束时触发的回调函数 -

返回值

参数 说明 类型
current 当前剩余的时间 CurrentTime
start 开始倒计时 () => void
pause 暂停倒计时 () => void
reset 重置倒计时,支持传入新的倒计时时长 (time?: number): void

CurrentTime 格式

名称 说明 类型
total 剩余总时间(单位毫秒) number
days 剩余天数 number
hours 剩余小时 number
minutes 剩余分钟 number
seconds 剩余秒数 number
milliseconds 剩余毫秒 number


Vant3 useToggle
Vant3 useCustomFieldValue
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Vant3 废弃内容

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }