ThCountdown倒计时

根据设置目标时间来倒计时的组件 可通过服务器时间校正当前系统时间

依赖说明

dayjs lodash

基本使用

<template>
  <div>
    <th-countdown value="2022-03-11 12:00:00" prefix="倒计时剩余: " suffix="..." format="DD天 HH小时 mm分钟 ss秒 S毫秒" />


    <th-countdown
        :value="countdownTime"
        prefix="倒计时剩余: "
        suffix="(比服务器快了5秒)!"
        format="YY年 MM月 DD天 HH小时 mm分钟 ss秒 SSS毫秒"
        value-style="color: red;font-size: 20px;padding: 0 10px;"
        is-correction
        :server-time="serverTime"
        :interval="5"
        :interval-func="intervalFunc"
        end="抢购结束,请等待下一波!"
        @finish="intervalFinish"
    />
  </div>
</template>

<script>
export default {
  data(){
    return {
      countdownTime: '2022-03-11 12:00:00',
      serverTime: '',
    }
  },
  methods: {
    intervalFinish() {
      console.log('倒计时结束了')
    },
    intervalFunc() {
      // 设置比服务器时间慢了5秒
      this.serverTime = Date.now() + 5000
    }
  }
}
</script>

Attributes

参数	说明	类型	默认值	可选值	是否必填
value	时间 日期或时间戳	Number/Date/String	--	--	是
valueStyle	时间的样式	String/Object	--	--	--
prefix	前缀 支持插入组件	String/VNode	--	--	--
suffix	后缀 支持插入组件	String/VNode	--	--	--
format	自定义格式化,参考dayjs (opens new window)	String	HH:mm:ss	--	--
isCorrection	是否开启校验日期	Boolean	false	false/true	--
interval	校验日期间隔(秒) 开启校验后适用	Number	60	--	--
intervalFunc	间隔调用函数 每隔{interval}秒自动调用,直至结束;用于在此函数中轮询获取服务器时间 开启校验后适用	Function	--	--	--
serverTime	服务器时间 日期或时间戳 开启校验后适用	Number/Date/String	--	--	--
diffTime	系统时间和服务器时间最大误差(毫秒) 开启校验后适用	Number	--	--	--
end	自定义倒计时结束语 支持插入组件	String/VNode	--	--	--

事件

事件名	说明	参数	返回值
finish	倒计时结束时	--	--