W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
用于實(shí)時(shí)展示倒計(jì)時(shí)數(shù)值,支持毫秒精度。
通過以下方式來全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { CountDown } from 'vant';
const app = createApp();
app.use(CountDown);
?time
? 屬性表示倒計(jì)時(shí)總時(shí)長,單位為毫秒。
<van-count-down :time="time" />
import { ref } from 'vue';
export default {
setup() {
const time = ref(30 * 60 * 60 * 1000);
return { time };
},
};
通過 ?format
? 屬性設(shè)置倒計(jì)時(shí)文本的內(nèi)容。
<van-count-down :time="time" format="DD 天 HH 時(shí) mm 分 ss 秒" />
倒計(jì)時(shí)默認(rèn)每秒渲染一次,設(shè)置 ?millisecond
? 屬性可以開啟毫秒級(jí)渲染。
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
通過插槽自定義倒計(jì)時(shí)的樣式,?timeData
? 對(duì)象格式見下方表格。
<van-count-down :time="time">
<template #default="timeData">
<span class="block">{{ timeData.hours }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.minutes }}</span>
<span class="colon">:</span>
<span class="block">{{ timeData.seconds }}</span>
</template>
</van-count-down>
<style>
.colon {
display: inline-block;
margin: 0 4px;
color: #1989fa;
}
.block {
display: inline-block;
width: 22px;
color: #fff;
font-size: 12px;
text-align: center;
background-color: #1989fa;
}
</style>
通過 ref 獲取到組件實(shí)例后,可以調(diào)用 ?start
?、?pause
?、?reset
? 方法。
<van-count-down
ref="countDown"
millisecond
:time="3000"
:auto-start="false"
format="ss:SSS"
@finish="onFinish"
/>
<van-grid clickable>
<van-grid-item text="開始" icon="play-circle-o" @click="start" />
<van-grid-item text="暫停" icon="pause-circle-o" @click="pause" />
<van-grid-item text="重置" icon="replay" @click="reset" />
</van-grid>
import { showToast } from 'vant';
export default {
setup() {
const countDown = ref(null);
const start = () => {
countDown.value.start();
};
const pause = () => {
countDown.value.pause();
};
const reset = () => {
countDown.value.reset();
};
const onFinish = () => showToast('倒計(jì)時(shí)結(jié)束');
return {
start,
pause,
reset,
onFinish,
countDown,
};
},
};
參數(shù) | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
time | 倒計(jì)時(shí)時(shí)長,單位毫秒 | number | string | 0
|
format | 時(shí)間格式 | string | HH:mm:ss
|
auto-start | 是否自動(dòng)開始倒計(jì)時(shí) | boolean | true
|
millisecond | 是否開啟毫秒級(jí)渲染 | boolean | false
|
格式 | 說明 |
---|---|
DD | 天數(shù) |
HH | 小時(shí) |
mm | 分鐘 |
ss | 秒數(shù) |
S | 毫秒(1 位) |
SS | 毫秒(2 位) |
SSS | 毫秒(3 位) |
事件名 | 說明 | 回調(diào)參數(shù) |
---|---|---|
finish | 倒計(jì)時(shí)結(jié)束時(shí)觸發(fā) | - |
change | 倒計(jì)時(shí)變化時(shí)觸發(fā) | currentTime: CurrentTime |
名稱 | 說明 | 參數(shù) |
---|---|---|
default | 自定義內(nèi)容 | currentTime: CurrentTime |
名稱 | 說明 | 類型 |
---|---|---|
total | 剩余總時(shí)間(單位毫秒) | number |
days | 剩余天數(shù) | number |
hours | 剩余小時(shí) | number |
minutes | 剩余分鐘 | number |
seconds | 剩余秒數(shù) | number |
milliseconds | 剩余毫秒 | number |
通過 ref 可以獲取到 CountDown 實(shí)例并調(diào)用實(shí)例方法,詳見組件實(shí)例方法。
方法名 | 說明 | 參數(shù) | 返回值 |
---|---|---|---|
start | 開始倒計(jì)時(shí) | - | - |
pause | 暫停倒計(jì)時(shí) | - | - |
reset | 重設(shè)倒計(jì)時(shí),若 auto-start 為 true ,重設(shè)后會(huì)自動(dòng)開始倒計(jì)時(shí) |
- | - |
組件導(dǎo)出以下類型定義:
import type {
CountDownProps,
CountDownInstance,
CountDownCurrentTime,
} from 'vant';
?CountDownInstance
? 是組件實(shí)例的類型,用法如下:
import { ref } from 'vue';
import type { CountDownInstance } from 'vant';
const countDownRef = ref<CountDownInstance>();
countDownRef.value?.start();
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-count-down-text-color | var(--van-text-color) | - |
--van-count-down-font-size | var(--van-font-size-md) | - |
--van-count-down-line-height | var(--van-line-height-md) | - |
如果你遇到了在 iOS 上倒計(jì)時(shí)不生效的問題,請(qǐng)確認(rèn)在創(chuàng)建 Date 對(duì)象時(shí)沒有使用?new Date('2020-01-01')
?這樣的寫法,iOS 不支持以中劃線分隔的日期格式,正確寫法是?new Date('2020/01/01')
?。
對(duì)此問題的詳細(xì)解釋:stackoverflow。
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: