W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
import Vue from 'vue';
import { CountDown } from 'vant';
Vue.use(CountDown);
time屬性表示倒計(jì)時(shí)總時(shí)長(zhǎng),單位為毫秒
<van-count-down :time="time" />
export default {
data() {
return {
time: 30 * 60 * 60 * 1000
};
}
}
通過(guò)format屬性設(shè)置倒計(jì)時(shí)文本的內(nèi)容
<van-count-down :time="time" format="DD 天 HH 時(shí) mm 分 ss 秒" />
倒計(jì)時(shí)默認(rèn)每秒渲染一次,設(shè)置millisecond屬性可以開(kāi)啟毫秒級(jí)渲染
<van-count-down millisecond :time="time" format="HH:mm:ss:SS" />
通過(guò)插槽自定義倒計(jì)時(shí)的樣式,timeData對(duì)象格式見(jiàn)下方表格
<van-count-down :time="time">
<template v-slot="timeData">
<span class="item">{{ timeData.hours }}</span>
<span class="item">{{ timeData.minutes }}</span>
<span class="item">{{ timeData.seconds }}</span>
</template>
</van-count-down>
<style>
.item {
display: inline-block;
width: 22px;
margin-right: 5px;
color: #fff;
font-size: 12px;
text-align: center;
background-color: #1989fa;
}
</style>
通過(guò) ref 獲取到組件實(shí)例后,可以調(diào)用start、pause、reset方法
<van-count-down
ref="countDown"
millisecond
:time="3000"
:auto-start="false"
format="ss:SSS"
@finish="finish"
/>
<van-grid clickable>
<van-grid-item text="開(kāi)始" 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 { Toast } from 'vant';
export default {
methods: {
start() {
this.$refs.countDown.start();
},
pause() {
this.$refs.countDown.pause();
},
reset() {
this.$refs.countDown.reset();
},
finish() {
Toast('倒計(jì)時(shí)結(jié)束');
}
}
}
參數(shù) | 說(shuō)明 | 類(lèi)型 | 默認(rèn)值 |
---|---|---|---|
time | 倒計(jì)時(shí)時(shí)長(zhǎng),單位毫秒 | number | string | 0 |
format | 時(shí)間格式 | string | HH:mm:ss |
auto-start | 是否自動(dòng)開(kāi)始倒計(jì)時(shí) | boolean | true |
millisecond | 是否開(kāi)啟毫秒級(jí)渲染 | boolean | false |
格式 | 說(shuō)明 |
---|---|
DD | 天數(shù) |
HH | 小時(shí) |
mm | 分鐘 |
ss | 秒數(shù) |
S | 毫秒(1 位) |
SS | 毫秒(2 位) |
SSS | 毫秒(3 位) |
事件名 | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
finish | 倒計(jì)時(shí)結(jié)束時(shí)觸發(fā) | - |
change v2.4.4 | 倒計(jì)時(shí)變化時(shí)觸發(fā) | timeData |
名稱(chēng) | 說(shuō)明 | SlotProps |
---|---|---|
default | 自定義內(nèi)容 | timeData |
名稱(chēng) | 說(shuō)明 | 類(lèi)型 |
---|---|---|
days | 剩余天數(shù) | number |
hours | 剩余小時(shí) | number |
minutes | 剩余分鐘 | number |
seconds | 剩余秒數(shù) | number |
milliseconds | 剩余毫秒 | number |
通過(guò) ref 可以獲取到 CountDown 實(shí)例并調(diào)用實(shí)例方法,詳見(jiàn) 組件實(shí)例方法
方法名 | 說(shuō)明 | 參數(shù) | 返回值 |
---|---|---|---|
start | 開(kāi)始倒計(jì)時(shí) | - | - |
pause | 暫停倒計(jì)時(shí) | - | - |
reset | 重設(shè)倒計(jì)時(shí),若auto-start 為true ,重設(shè)后會(huì)自動(dòng)開(kāi)始倒計(jì)時(shí) | - | - |
如果你遇到了在 iOS 上倒計(jì)時(shí)不生效的問(wèn)題,請(qǐng)確認(rèn)在創(chuàng)建 Date 對(duì)象時(shí)沒(méi)有使用new Date('2020-01-01')這樣的寫(xiě)法,iOS 不支持以中劃線分隔的日期格式,正確寫(xiě)法是new Date('2020/01/01')。
對(duì)此問(wèn)題的詳細(xì)解釋?zhuān)?a rel="external nofollow" target="_blank" target="_blank">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)系方式:
更多建議: