From 7cf58a4d2fff6b9cba9029d4d43ba9744dbef864 Mon Sep 17 00:00:00 2001
From: Ben Lin <maobin001@msn.com>
Date: 星期四, 18 七月 2024 15:49:03 +0800
Subject: [PATCH] 工单更新
---
src/components/CountTo/src/CountTo.vue | 145 +++++++++++++++++++++++------------------------
1 files changed, 71 insertions(+), 74 deletions(-)
diff --git a/src/components/CountTo/src/CountTo.vue b/src/components/CountTo/src/CountTo.vue
index 7de3361..98684a4 100644
--- a/src/components/CountTo/src/CountTo.vue
+++ b/src/components/CountTo/src/CountTo.vue
@@ -3,12 +3,14 @@
{{ value }}
</span>
</template>
-<script lang="ts">
- import { defineComponent, ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
+<script lang="ts" setup>
+ import { ref, computed, watchEffect, unref, onMounted, watch } from 'vue';
import { useTransition, TransitionPresets } from '@vueuse/core';
- import { isNumber } from '/@/utils/is';
+ import { isNumber } from '@/utils/is';
- const props = {
+ defineOptions({ name: 'CountTo' });
+
+ const props = defineProps({
startVal: { type: Number, default: 0 },
endVal: { type: Number, default: 2021 },
duration: { type: Number, default: 1500 },
@@ -36,75 +38,70 @@
* Digital animation
*/
transition: { type: String, default: 'linear' },
- };
-
- export default defineComponent({
- name: 'CountTo',
- props,
- emits: ['onStarted', 'onFinished'],
- setup(props, { emit }) {
- const source = ref(props.startVal);
- const disabled = ref(false);
- let outputValue = useTransition(source);
-
- const value = computed(() => formatNumber(unref(outputValue)));
-
- watchEffect(() => {
- source.value = props.startVal;
- });
-
- watch([() => props.startVal, () => props.endVal], () => {
- if (props.autoplay) {
- start();
- }
- });
-
- onMounted(() => {
- props.autoplay && start();
- });
-
- function start() {
- run();
- source.value = props.endVal;
- }
-
- function reset() {
- source.value = props.startVal;
- run();
- }
-
- function run() {
- outputValue = useTransition(source, {
- disabled,
- duration: props.duration,
- onFinished: () => emit('onFinished'),
- onStarted: () => emit('onStarted'),
- ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}),
- });
- }
-
- function formatNumber(num: number | string) {
- if (!num && num !== 0) {
- return '';
- }
- const { decimals, decimal, separator, suffix, prefix } = props;
- num = Number(num).toFixed(decimals);
- num += '';
-
- const x = num.split('.');
- let x1 = x[0];
- const x2 = x.length > 1 ? decimal + x[1] : '';
-
- const rgx = /(\d+)(\d{3})/;
- if (separator && !isNumber(separator)) {
- while (rgx.test(x1)) {
- x1 = x1.replace(rgx, '$1' + separator + '$2');
- }
- }
- return prefix + x1 + x2 + suffix;
- }
-
- return { value, start, reset };
- },
});
+
+ const emit = defineEmits(['onStarted', 'onFinished']);
+
+ const source = ref(props.startVal);
+ const disabled = ref(false);
+ let outputValue = useTransition(source);
+
+ const value = computed(() => formatNumber(unref(outputValue)));
+
+ watchEffect(() => {
+ source.value = props.startVal;
+ });
+
+ watch([() => props.startVal, () => props.endVal], () => {
+ if (props.autoplay) {
+ start();
+ }
+ });
+
+ onMounted(() => {
+ props.autoplay && start();
+ });
+
+ function start() {
+ run();
+ source.value = props.endVal;
+ }
+
+ function reset() {
+ source.value = props.startVal;
+ run();
+ }
+
+ function run() {
+ outputValue = useTransition(source, {
+ disabled,
+ duration: props.duration,
+ onFinished: () => emit('onFinished'),
+ onStarted: () => emit('onStarted'),
+ ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {}),
+ });
+ }
+
+ function formatNumber(num: number | string) {
+ if (!num && num !== 0) {
+ return '';
+ }
+ const { decimals, decimal, separator, suffix, prefix } = props;
+ num = Number(num).toFixed(decimals);
+ num += '';
+
+ const x = num.split('.');
+ let x1 = x[0];
+ const x2 = x.length > 1 ? decimal + x[1] : '';
+
+ const rgx = /(\d+)(\d{3})/;
+ if (separator && !isNumber(separator)) {
+ while (rgx.test(x1)) {
+ x1 = x1.replace(rgx, '$1' + separator + '$2');
+ }
+ }
+ return prefix + x1 + x2 + suffix;
+ }
+
+ defineExpose({ reset });
</script>
--
Gitblit v1.9.3