From 24bad09c7460c46ba4b315ad2b660c84ad4e2d83 Mon Sep 17 00:00:00 2001 From: Netfan Date: Mon, 17 Feb 2025 21:16:10 +0800 Subject: [PATCH] refactor: new `CountTo` component with demo (#5551) --- .../src/components/count-to/count-to.vue | 123 ++++++++++++ .../src/components/count-to/index.ts | 2 + .../src/components/count-to/types.ts | 53 ++++++ .../effects/common-ui/src/components/index.ts | 1 + .../src/router/routes/modules/examples.ts | 9 + .../src/views/examples/count-to/index.vue | 178 ++++++++++++++++++ 6 files changed, 366 insertions(+) create mode 100644 packages/effects/common-ui/src/components/count-to/count-to.vue create mode 100644 packages/effects/common-ui/src/components/count-to/index.ts create mode 100644 packages/effects/common-ui/src/components/count-to/types.ts create mode 100644 playground/src/views/examples/count-to/index.vue diff --git a/packages/effects/common-ui/src/components/count-to/count-to.vue b/packages/effects/common-ui/src/components/count-to/count-to.vue new file mode 100644 index 00000000..0d73e3a9 --- /dev/null +++ b/packages/effects/common-ui/src/components/count-to/count-to.vue @@ -0,0 +1,123 @@ + + + diff --git a/packages/effects/common-ui/src/components/count-to/index.ts b/packages/effects/common-ui/src/components/count-to/index.ts new file mode 100644 index 00000000..d942796e --- /dev/null +++ b/packages/effects/common-ui/src/components/count-to/index.ts @@ -0,0 +1,2 @@ +export { default as CountTo } from './count-to.vue'; +export * from './types'; diff --git a/packages/effects/common-ui/src/components/count-to/types.ts b/packages/effects/common-ui/src/components/count-to/types.ts new file mode 100644 index 00000000..0b3bd82d --- /dev/null +++ b/packages/effects/common-ui/src/components/count-to/types.ts @@ -0,0 +1,53 @@ +import type { CubicBezierPoints, EasingFunction } from '@vueuse/core'; + +import type { StyleValue } from 'vue'; + +import { TransitionPresets as TransitionPresetsData } from '@vueuse/core'; + +export type TransitionPresets = keyof typeof TransitionPresetsData; + +export const TransitionPresetsKeys = Object.keys( + TransitionPresetsData, +) as TransitionPresets[]; + +export interface CountToProps { + /** 初始值 */ + startVal?: number; + /** 当前值 */ + endVal: number; + /** 是否禁用动画 */ + disabled?: boolean; + /** 延迟动画开始的时间 */ + delay?: number; + /** 持续时间 */ + duration?: number; + /** 小数位数 */ + decimals?: number; + /** 小数点 */ + decimal?: string; + /** 分隔符 */ + separator?: string; + /** 前缀 */ + prefix?: string; + /** 后缀 */ + suffix?: string; + /** 过渡效果 */ + transition?: CubicBezierPoints | EasingFunction | TransitionPresets; + /** 整数部分的类名 */ + mainClass?: string; + /** 小数部分的类名 */ + decimalClass?: string; + /** 前缀部分的类名 */ + prefixClass?: string; + /** 后缀部分的类名 */ + suffixClass?: string; + + /** 整数部分的样式 */ + mainStyle?: StyleValue; + /** 小数部分的样式 */ + decimalStyle?: StyleValue; + /** 前缀部分的样式 */ + prefixStyle?: StyleValue; + /** 后缀部分的样式 */ + suffixStyle?: StyleValue; +} diff --git a/packages/effects/common-ui/src/components/index.ts b/packages/effects/common-ui/src/components/index.ts index a1830850..3fed8ee8 100644 --- a/packages/effects/common-ui/src/components/index.ts +++ b/packages/effects/common-ui/src/components/index.ts @@ -1,6 +1,7 @@ export * from './api-component'; export * from './captcha'; export * from './col-page'; +export * from './count-to'; export * from './ellipsis-text'; export * from './icon-picker'; export * from './json-viewer'; diff --git a/playground/src/router/routes/modules/examples.ts b/playground/src/router/routes/modules/examples.ts index b75668c9..cc86838e 100644 --- a/playground/src/router/routes/modules/examples.ts +++ b/playground/src/router/routes/modules/examples.ts @@ -273,6 +273,15 @@ const routes: RouteRecordRaw[] = [ title: 'Motion', }, }, + { + name: 'CountTo', + path: '/examples/count-to', + component: () => import('#/views/examples/count-to/index.vue'), + meta: { + icon: 'mdi:animation-play', + title: 'CountTo', + }, + }, ], }, ]; diff --git a/playground/src/views/examples/count-to/index.vue b/playground/src/views/examples/count-to/index.vue new file mode 100644 index 00000000..ef690e9c --- /dev/null +++ b/playground/src/views/examples/count-to/index.vue @@ -0,0 +1,178 @@ + +