|
1 | 1 | <template>
|
2 | 2 | <Button v-bind="$attrs" :disabled="isStart" @click="handleStart" :loading="loading">
|
3 |
| - {{ |
4 |
| - !isStart |
5 |
| - ? t('component.countdown.normalText') |
6 |
| - : t('component.countdown.sendText', [currentCount]) |
7 |
| - }} |
| 3 | + {{ getButtonText }} |
8 | 4 | </Button>
|
9 | 5 | </template>
|
10 | 6 | <script lang="ts">
|
11 |
| - import { defineComponent, ref, PropType, watchEffect } from 'vue'; |
12 |
| -
|
| 7 | + import { defineComponent, ref, watchEffect, computed, unref } from 'vue'; |
13 | 8 | import { Button } from 'ant-design-vue';
|
14 |
| -
|
15 | 9 | import { useCountdown } from './useCountdown';
|
16 | 10 | import { isFunction } from '/@/utils/is';
|
17 | 11 | import { useI18n } from '/@/hooks/web/useI18n';
|
18 |
| - import { propTypes } from '/@/utils/propTypes'; |
| 12 | +
|
| 13 | + const props = { |
| 14 | + value: { type: [Object, Number, String, Array] }, |
| 15 | + count: { type: Number, default: 60 }, |
| 16 | + beforeStartFunc: { |
| 17 | + type: Function as PropType<() => Promise<boolean>>, |
| 18 | + default: null, |
| 19 | + }, |
| 20 | + }; |
19 | 21 |
|
20 | 22 | export default defineComponent({
|
21 | 23 | name: 'CountButton',
|
22 | 24 | components: { Button },
|
23 |
| - props: { |
24 |
| - value: propTypes.any, |
25 |
| - count: propTypes.number.def(60), |
26 |
| - beforeStartFunc: { |
27 |
| - type: Function as PropType<() => boolean>, |
28 |
| - default: null, |
29 |
| - }, |
30 |
| - }, |
| 25 | + props, |
31 | 26 | setup(props) {
|
32 | 27 | const loading = ref(false);
|
33 | 28 |
|
34 | 29 | const { currentCount, isStart, start, reset } = useCountdown(props.count);
|
35 | 30 | const { t } = useI18n();
|
36 | 31 |
|
| 32 | + const getButtonText = computed(() => { |
| 33 | + return !unref(isStart) |
| 34 | + ? t('component.countdown.normalText') |
| 35 | + : t('component.countdown.sendText', [unref(currentCount)]); |
| 36 | + }); |
| 37 | +
|
37 | 38 | watchEffect(() => {
|
38 | 39 | props.value === undefined && reset();
|
39 | 40 | });
|
| 41 | +
|
40 | 42 | /**
|
41 | 43 | * @description: Judge whether there is an external function before execution, and decide whether to start after execution
|
42 | 44 | */
|
|
54 | 56 | start();
|
55 | 57 | }
|
56 | 58 | }
|
57 |
| - return { handleStart, isStart, currentCount, loading, t }; |
| 59 | + return { handleStart, currentCount, loading, getButtonText, isStart }; |
58 | 60 | },
|
59 | 61 | });
|
60 | 62 | </script>
|
0 commit comments