TnCountDown-倒计时

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

组件位置

nodeuni_modules

typescript

import TnCountDown from '@tuniao/tnui-vue3-uniapp/components/count-down/src/count-down.vue'

import TnCountDown from '@tuniao/tnui-vue3-uniapp/components/count-down/src/count-down.vue'

typescript

import TnCountDown from '@/uni_modules/tuniaoui-vue3/components/count-down/src/count-down.vue'

import TnCountDown from '@/uni_modules/tuniaoui-vue3/components/count-down/src/count-down.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过time属性设置倒计时的时间，单位为秒

vue

<template>
  <TnCountDown :time="300" />
</template>

<template>
  <TnCountDown :time="300" />
</template>

控制时间显示、隐藏

通过设置show-day、show-hour、show-minute、show-second属性，控制显示、隐藏 天、时、分、秒，默认只显示时、分、秒

针对day的显示还有auto-hide-day属性，当time小于86400时，自动隐藏day，默认为true

显示`天`、`时`、`分`、`秒`

vue

<template>
  <TnCountDown :time="86500" show-day />
</template>

<template>
  <TnCountDown :time="86500" show-day />
</template>

显示`分`、`秒`

vue

<template>
  <TnCountDown :time="300" :show-hour="false" />
</template>

<template>
  <TnCountDown :time="300" :show-hour="false" />
</template>

修改分割符样式

通过separator-mode属性，默认为en，可选值为en、cn，分别对应英文分割符和中文分割符

vue

<template>
  <TnCountDown :time="300" separator-mode="cn" />
</template>

<template>
  <TnCountDown :time="300" separator-mode="cn" />
</template>

API

Props

属性名	说明	类型	默认值	可选值
time	倒计时时间，单位秒	Number	0	-
auto-start	是否自动开始	Boolean	`true`	`false`
size	倒计时尺寸，内置 `sm` 、`lg` 、`xl`，也可以传递指定的数值进行设置	String	-	`sm` \ `lg` \ `xl`
text-color	字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
show-day	是否显示天数	Boolean	`false`	`true`
show-hour	是否显示小时	Boolean	`true`	`false`
show-minute	是否显示分钟	Boolean	`true`	`false`
show-second	是否显示秒数	Boolean	`true`	`false`
auto-hide-day	自动隐藏天数	Boolean	`true`	`false`
separator-mode	分割符类型，`cn` 显示对应语言的中文分割符，`en` 显示 : 分割符	String	`en`	`cn`
separator-color	分割符颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
border	是否显示边框	Boolean	`false`	`true`
border-color	边框颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-

Emits

事件名	说明	类型
start	倒计时开始时触发	`() => void`
end	倒计时结束时触发	`() => void`

Expose

函数名	说明	类型
start	开始倒计时	`() => void`
stop	停止倒计时	`() => void`
reset	重置倒计时	`() => void`

TnCountDown-倒计时 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

控制时间显示、隐藏 ​

显示天、时、分、秒 ​

显示分、秒 ​

修改分割符样式 ​

API ​

Props ​

Emits ​

Expose ​