跳到主要内容

倒计时 Countdown

倒计时组件用于实时展示倒计时数值,精度支持毫秒

用法示例

基础用法

<ti-countdown autoplay></ti-countdown>

格式化时间

<ti-countdown format="HH:mm:ss SSS"></ti-countdown>
<ti-countdown format="DD天HH时mm分ss SSS"></ti-countdown>
<ti-countdown format="D天H时m分s SSS"></ti-countdown>

风格

<ti-countdown variant="pure" format="DD天HH:mm:ss SSS"></ti-countdown>
<ti-countdown variant="block" format="DD天HH时mm分ss SSS"></ti-countdown>
<ti-countdown variant="mixture" format="D天H时m分s SSS"></ti-countdown>

尺寸

在variant设为block或者mixture下生效,对应块状尺寸分别为32px 40px 44px 48px

<ti-countdown variant="block" size="small"></ti-countdown>
<ti-countdown variant="block" size="medium"></ti-countdown>
<ti-countdown variant="block" size="big"></ti-countdown>
<ti-countdown variant="block" size="large"></ti-countdown>

启动、暂停、重置

function onStart() {
const countDown = document.getElementById('ti-countdown');
countDown.start();
};
function onPause() {
const countDown = document.getElementById('ti-countdown');
countDown.pause();
};
function onReset() {
const countDown = document.getElementById('ti-countdown');
countDown.reset();
};

自定义内容

<ti-countdown time="118888666" use-slot onchange="onChange(event)">
<div id="day">0</div>
<div class="tag"></div>
<div id="hour">0</div>
<div class="tag"><ti-icon size="24" name="colon"></ti-icon></div>
<div id="minute">0</div>
<div class="tag"><ti-icon size="24" name="colon"></ti-icon></div>
<div id="second">0</div>
</ti-countdown>

ti-countdown API

属性 Properties

名称类型必填默认值说明备注
variantstringpure倒计时的风格,可选值:pure block mixture-
sizestringmedium倒计时的尺寸,在variant设为block或者mixture下生效,可选值:small medium big large,对应块状尺寸分别为32px 40px 44px 48px-
timenumber1200倒计时时长,单位毫秒-
formatstringHH:mm:ss时间格式,DD-日,HH-时,mm-分,ss-秒,SSS-毫秒-
autoplaybooleanfalse是否自动开始倒计时-
use-slotbooleanfalse是否使用自定义样式插槽-
ext-stylestring-根节点样式-

事件 Events

名称参数列表描述备注
finish(e: CustomEvent) => void倒计时结束时触发-
change(e: CustomEvent<{day: number, hour: number, minute: number, second: number, millisecond: number}>) => void时间变化时触发-

插槽 Slots

名称说明备注
default默认插槽-

外部样式类 External Classes

名称说明备注
ext-class根节点样式类-

CSS 变量 CSS Variable

变量默认值说明备注
--countdown-color#757575倒计时文字颜色,块状风格下默认值为#ff2e2e-
--countdown-font-size28px倒计时文字字号-
--countdown-line-height34px倒计时文字行高-
--countdown-border-radius8px块状风格下,圆角-
--countdown-background#fff2f2块状风格下,背景色-
--countdown-font-familywemo块状风格下,文字字体-
--countdown-font-weight600块状风格下,文字字重-
--countdown-day-color600块状风格下,天数文字颜色-
--countdown-day-font-size24px块状风格下,天数文字大小-
--countdown-day-margin-块状风格下,天数区域的间距-
--countdown-dot-color#212121块状风格下,图标冒号颜色-
--countdown-dot-size20块状风格下,图标冒号大小-
--countdown-size-块状风格下,方块的大小-
--countdown-millisecond-width52px块状风格下,毫秒区域的宽度-