|
1 | 1 | <template> |
2 | | - <div class="mbPx-4">req relative</div> |
3 | | - <van-button type="primary" size="small" @click="testReq">test Req</van-button> |
| 2 | + <div class="mbPx-4 mt-4">基础用法</div> |
| 3 | + <van-count-down :time="time" /> |
4 | 4 |
|
5 | | - <div class="mbPx-4 mt-4">mock demo</div> |
6 | | - <van-button type="primary" size="small" @click="mockRelative">mockRelative</van-button> |
| 5 | + <div class="mbPx-4 mt-4">自定义格式</div> |
| 6 | + <van-count-down :time="time" format="DD 天 HH 时 mm 分 ss 秒" /> |
7 | 7 |
|
8 | | - <div class="mbPx-4 mt-4">VuexUse</div> |
9 | | - <van-button type="primary" size="small" @click="VuexUse">VuexUse</van-button> |
| 8 | + <div class="mbPx-4 mt-4">毫秒级渲染</div> |
| 9 | + <van-count-down millisecond :time="time" format="HH:mm:ss:SS" /> |
10 | 10 |
|
11 | | - <div class="mbPx-4 mt-4">SvgIcon</div> |
12 | | - <van-button type="primary" size="small" @click="SvgIcon">SvgIcon</van-button> |
| 11 | + <div class="mbPx-4 mt-4">自定义样式</div> |
| 12 | + <van-count-down :time="time"> |
| 13 | + <template #default="timeData"> |
| 14 | + <span class="block">{{ timeData.hours }}</span> |
| 15 | + <span class="colon">:</span> |
| 16 | + <span class="block">{{ timeData.minutes }}</span> |
| 17 | + <span class="colon">:</span> |
| 18 | + <span class="block">{{ timeData.seconds }}</span> |
| 19 | + </template> |
| 20 | + </van-count-down> |
13 | 21 |
|
14 | | - <div class="mbPx-4 mt-4">KeepAlive</div> |
15 | | - <van-button type="primary" size="small" @click="KeepAlive">KeepAlive</van-button> |
| 22 | + <div class="mbPx-4 mt-4">手动控制</div> |
| 23 | + <van-count-down ref="countDown" millisecond :time="3000" :auto-start="false" format="ss:SSS" @finish="onFinish" /> |
| 24 | + <van-grid clickable> |
| 25 | + <van-grid-item text="开始" icon="play-circle-o" @click="start" /> |
| 26 | + <van-grid-item text="暂停" icon="pause-circle-o" @click="pause" /> |
| 27 | + <van-grid-item text="重置" icon="replay" @click="reset" /> |
| 28 | + </van-grid> |
| 29 | + |
| 30 | + <div class="mb-2 mt-5">to look the use demo</div> |
| 31 | + <van-button type="primary" size="small" @click="ToExample">ToExample</van-button> |
16 | 32 | </template> |
17 | 33 |
|
18 | 34 | <script setup> |
19 | 35 | import { onMounted, watch, ref, toRefs, reactive, computed } from 'vue' |
20 | | -import axiosReq from '@/utils/axiosReq' |
21 | | -import useVant from '@/hooks/useVant' |
22 | | -import useRouter from '@/hooks/useRouter' |
| 36 | +const time = ref(30 * 60 * 60 * 1000) |
23 | 37 |
|
24 | | -const testReq = () => { |
25 | | - let reqConfig = { |
26 | | - url: '/ty-user/user/loginOut', |
27 | | - method: 'post', |
28 | | - bfLoading: false, |
29 | | - isAlertErrorMsg: false |
30 | | - } |
31 | | - axiosReq(reqConfig).then((res) => { |
32 | | - useVant.vantToastNoneMixin('req success') |
33 | | - }) |
34 | | -} |
| 38 | +const countDown = ref(null) |
35 | 39 |
|
36 | | -//mock |
37 | | -const mockRelative = () => { |
38 | | - useRouter.routerPushMixin('MockTest') |
| 40 | +const start = () => { |
| 41 | + countDown.value.start() |
39 | 42 | } |
40 | | -
|
41 | | -//VuexUse |
42 | | -const VuexUse = () => { |
43 | | - useRouter.routerPushMixin('VuexUse') |
| 43 | +const pause = () => { |
| 44 | + countDown.value.pause() |
44 | 45 | } |
45 | | -
|
46 | | -//SvgIcon |
47 | | -const SvgIcon = () => { |
48 | | - useRouter.routerPushMixin('SvgIcon') |
| 46 | +const reset = () => { |
| 47 | + countDown.value.reset() |
49 | 48 | } |
| 49 | +import { Toast } from 'vant' |
| 50 | +const onFinish = () => Toast('倒计时结束') |
| 51 | +import useRouter from '@/hooks/useRouter' |
50 | 52 |
|
51 | | -//KeepAlive |
52 | | -const KeepAlive = () => { |
53 | | - useRouter.routerPushMixin('KeepAlive') |
| 53 | +//ToExample |
| 54 | +const ToExample = () => { |
| 55 | + useRouter.routerPushMixin('Example') |
54 | 56 | } |
55 | 57 | </script> |
56 | 58 |
|
57 | 59 | <style scoped lang="scss"></style> |
| 60 | +<style> |
| 61 | +.colon { |
| 62 | + display: inline-block; |
| 63 | + margin: 0 8px; |
| 64 | + color: #ee0a24; |
| 65 | +} |
| 66 | +.block { |
| 67 | + display: inline-block; |
| 68 | + width: 44px; |
| 69 | + color: #fff; |
| 70 | + font-size: 28px; |
| 71 | + text-align: center; |
| 72 | + background-color: #ee0a24; |
| 73 | +} |
| 74 | +</style> |
0 commit comments