CountDown 倒计时

该组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间感受，提示用户进行某一个行为操作。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

通过timestamp参数设置倒计时间，单位为秒。

<template>
	<tn-count-down :timestamp="timestamp"></tn-count-down>
</template>

<script>
	export default {
		data() {
			timestamp: 86400,
		}
	}
</script>

设置是否显示天、时、分、秒

可以通过showDays、showHours、showMinutes、showSeconds参数设置为true(默认值)，可以对应显示天、时、分、秒。

另外还提供了一个hideZeroDay参数自动隐藏0天的情况，默认为关闭状态。

说明：参数的配置原则应该是"自右向左"的，设置了"时"，它右边的"分"和"秒"也应该设置为true。

<tn-count-down :timestamp="timestamp" :showDays="false" :showHours="false"></tn-count-down>

设置倒计时分隔符

可以通过separator设置是使用 ‘:’ 还是中文作为分隔符。并且通过separatorColor和separatorSize来设置分隔符的颜色和大小。

• en: 默认值，显示冒号分隔符。
• ch: 显示中文分隔符。

<tn-count-down :timestamp="timestamp" separator="ch" separatorColor="#01BEFF"></tn-count-down>

执行倒计时时机

通过autoplay配置倒计时是否在组件的mounted生命周期进行初始化(在timestamp有值前提下)，如果设置autoplay为false，就需要手动通过 ref的形式通知倒计时开始执行，调用的是组件内部的start()方法。

<template>
  <tn-count-down ref="countDown" :timestamp="timestamp" :autoplay="false"></tn-count-down>
</template>

<script>
  export default {
    data() {
      timestamp: 86400,
    },
    onLoad() {
      setTimeout(() => {
        this.$refs.countDown.start();
      }, 2000)
    }
  }
</script>

获取当前倒计时剩余秒数

有以下两种方法进行配置：

• 监听change事件，在回调中获得当前剩余的秒数。
• 通过ref调用，获取内部的seconds参数即为当前剩余的秒数。

<template>
  <tn-count-down ref="countDown" :timestamp="timestamp" :autoplay="false" @change="change"></tn-count-down>
</template>

<script>
  export default {
    data() {
      timestamp: 86400,
    },
    onLoad() {
      setTimeout(() => {
        this.$refs.countDown.start();
      }, 2000)
    },
    methods: {
      // 事件触发，每秒一次
      change(timestamp) {
        console.log(timestamp);
      },
      // ref形式获取内部的值
      getSeconds() {
        console.log(this.$refs.countDown.seconds);
      }
    }
  }
</script>

API

Props

属性名	说明	类型	默认值	可选值
timestamp	倒计时时间，单位s	Number	0	-
autoplay	自定开启倒计时	Boolean	true	false
backgroundColor	背景颜色	String	#FFFFFF	颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontColor	字体颜色	String	#080808	颜色的十六进制值，rgba(),rgb(),TuniaoUI内置的颜色类名
fontSize	字体大小	Number	30	-
fontUnit	字体大小的单位	String	rpx	-
height	数字框的高度	String	auto	-
separator	分隔符类型	String	en	ch
separatorSize	分隔符尺寸，单位rpx	Number	30	-
separatorColor	分隔符颜色	String	#080808	-
showBorder	显示边框	String	false	true
borderColor	边框颜色	String	#080808	-
showSeconds	显示秒	Boolean	true	false
showMinutes	显示分	Boolean	true	false
showHours	显示时	Boolean	true	false
showDays	显示天	Boolean	true	false
hideZeroDay	自动隐藏0天的情况	Boolean	false	true

Slots

none

Methods

需要通过ref手动调用。

名称	说明
start	开始执行倒计时

Event

事件名称	说明	回调参数
end	倒计时结束	-
change	倒计时过程中，每秒触发一次	当前剩余的倒计时的时间戳