/*! For license information please see 2512.7c851ddb.js.LICENSE.txt */
(self.webpackChunk=self.webpackChunk||[]).push([["2512"],{1560:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'CountDown
\nIntro
\n
Used to display the countdown value in real time, and precision supports milliseconds.
\n
Install
\n
Register component globally via app.use, refer to Component Registration for more registration ways.
\n
import { createApp } from 'vue';\nimport { CountDown } from 'vant';\n\nconst app = createApp();\napp.use(CountDown);\n
\n
Usage
\nBasic Usage
\n
<van-count-down :time="time" />\n
\n
import { ref } from 'vue';\n\nexport default {\n setup() {\n const time = ref(30 * 60 * 60 * 1000);\n return { time };\n },\n};\n
\n
\n
<van-count-down :time="time" format="DD Day, HH:mm:ss" />\n
\n
Millisecond
\n
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />\n
\n
Custom Style
\n
<van-count-down :time="time">\n <template #default="timeData">\n <span class="block">{{ timeData.hours }}</span>\n <span class="colon">:</span>\n <span class="block">{{ timeData.minutes }}</span>\n <span class="colon">:</span>\n <span class="block">{{ timeData.seconds }}</span>\n </template>\n</van-count-down>\n\n<style>\n .colon {\n display: inline-block;\n margin: 0 4px;\n color: #1989fa;\n }\n .block {\n display: inline-block;\n width: 22px;\n color: #fff;\n font-size: 12px;\n text-align: center;\n background-color: #1989fa;\n }\n</style>\n
\n
Manual Control
\n
<van-count-down\n ref="countDown"\n millisecond\n :time="3000"\n :auto-start="false"\n format="ss:SSS"\n @finish="onFinish"\n/>\n<van-grid clickable :column-num="3">\n <van-grid-item text="Start" icon="play-circle-o" @click="start" />\n <van-grid-item text="Pause" icon="pause-circle-o" @click="pause" />\n <van-grid-item text="Reset" icon="replay" @click="reset" />\n</van-grid>\n
\n
import { showToast } from 'vant';\n\nexport default {\n setup() {\n const countDown = ref(null);\n\n const start = () => {\n countDown.value.start();\n };\n const pause = () => {\n countDown.value.pause();\n };\n const reset = () => {\n countDown.value.reset();\n };\n const onFinish = () => showToast('Finished');\n\n return {\n start,\n pause,\n reset,\n onFinish,\n countDown,\n };\n },\n};\n
\n
API
\nProps
\n
\n\n\n| Attribute | \nDescription | \nType | \nDefault | \n
\n\n\n\n| time | \nTotal time, unit milliseconds | \nnumber | string | \n0 | \n
\n\n| format | \nTime format | \nstring | \nHH:mm:ss | \n
\n\n| auto-start | \nWhether to auto start count down | \nboolean | \ntrue | \n
\n\n| millisecond | \nWhether to enable millisecond render | \nboolean | \nfalse | \n
\n\n
\n
\n
\n\n\n| Format | \nDescription | \n
\n\n\n\n| DD | \nDay | \n
\n\n| HH | \nHour | \n
\n\n| mm | \nMinute | \n
\n\n| ss | \nSecond | \n
\n\n| S | \nMillisecond, 1-digit | \n
\n\n| SS | \nMillisecond, 2-digits | \n
\n\n| SSS | \nMillisecond, 3-digits | \n
\n\n
\n
Events
\n
\n\n\n| Event | \nDescription | \nArguments | \n
\n\n\n\n| finish | \nEmitted when count down finished | \n- | \n
\n\n| change | \nEmitted when count down changed | \ncurrentTime: CurrentTime | \n
\n\n
\n
Slots
\n
\n\n\n| Name | \nDescription | \nSlotProps | \n
\n\n\n\n| default | \nCustom Content | \ncurrentTime: CurrentTime | \n
\n\n
\n
CurrentTime Structure
\n
\n\n\n| Name | \nDescription | \nType | \n
\n\n\n\n| total | \nTotal time, unit milliseconds | \nnumber | \n
\n\n| days | \nRemain days | \nnumber | \n
\n\n| hours | \nRemain hours | \nnumber | \n
\n\n| minutes | \nRemain minutes | \nnumber | \n
\n\n| seconds | \nRemain seconds | \nnumber | \n
\n\n| milliseconds | \nRemain milliseconds | \nnumber | \n
\n\n
\n
Methods
\n
Use ref to get CountDown instance and call instance methods.
\n
\n\n\n| Name | \nDescription | \nAttribute | \nReturn value | \n
\n\n\n\n| start | \nStart count down | \n- | \n- | \n
\n\n| pause | \nPause count down | \n- | \n- | \n
\n\n| reset | \nReset count down | \n- | \n- | \n
\n\n
\n
Types
\n
The component exports the following type definitions:
\n
import type {\n CountDownProps,\n CountDownInstance,\n CountDownCurrentTime,\n} from 'vant';\n
\n
CountDownInstance is the type of component instance:
\n
import { ref } from 'vue';\nimport type { CountDownInstance } from 'vant';\n\nconst countDownRef = ref<CountDownInstance>();\n\ncountDownRef.value?.start();\n
\n
Theming
\nCSS Variables
\n
The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n
\n\n\n| Name | \nDefault Value | \nDescription | \n
\n\n\n\n| --van-count-down-text-color | \nvar(--van-text-color) | \n- | \n
\n\n| --van-count-down-font-size | \nvar(--van-font-size-md) | \n- | \n
\n\n| --van-count-down-line-height | \nvar(--van-line-height-md) | \n- | \n
\n\n
\n