2019-05-25 09:18:04 +00:00
|
|
|
<cn>
|
|
|
|
#### 倒计时
|
|
|
|
倒计时组件。
|
|
|
|
</cn>
|
|
|
|
|
|
|
|
<us>
|
|
|
|
#### Countdown
|
|
|
|
Countdown component.
|
|
|
|
</us>
|
|
|
|
|
2019-10-09 10:32:23 +00:00
|
|
|
```tpl
|
2019-05-25 09:18:04 +00:00
|
|
|
<template>
|
2019-05-28 03:10:38 +00:00
|
|
|
<a-row :gutter="16">
|
|
|
|
<a-col :span="12">
|
|
|
|
<a-statistic-countdown
|
|
|
|
title="Countdown"
|
|
|
|
:value="deadline"
|
|
|
|
@finish="onFinish"
|
|
|
|
style="margin-right: 50px"
|
|
|
|
/>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="12">
|
|
|
|
<a-statistic-countdown
|
|
|
|
title="Million Seconds"
|
|
|
|
:value="deadline"
|
|
|
|
format="HH:mm:ss:SSS"
|
|
|
|
style="margin-right: 50px"
|
|
|
|
/>
|
|
|
|
</a-col>
|
|
|
|
<a-col :span="24" style="margin-top: 32px;">
|
2019-09-28 12:45:07 +00:00
|
|
|
<a-statistic-countdown title="Day Level" :value="deadline" format="D 天 H 时 m 分 s 秒" />
|
2019-05-28 03:10:38 +00:00
|
|
|
</a-col>
|
|
|
|
</a-row>
|
2019-05-25 09:18:04 +00:00
|
|
|
</template>
|
|
|
|
<script>
|
2019-09-28 12:45:07 +00:00
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
deadline: Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
onFinish() {
|
|
|
|
console.log('over');
|
|
|
|
},
|
2019-05-25 09:18:04 +00:00
|
|
|
},
|
2019-09-28 12:45:07 +00:00
|
|
|
};
|
2019-05-25 09:18:04 +00:00
|
|
|
</script>
|
2019-05-28 03:10:38 +00:00
|
|
|
```
|