isoftstone/lc_frontend

Fork 0

Files

juncaiq e6e86f2ce0 init

2025-10-17 10:31:13 +08:00

5.8 KiB

Raw Blame History

数字分割显示功能说明

功能概述

实现了将数字（如23897）分割成单个数字并分别显示在容器中的功能。每个数字都有独立的样式容器，可以单独设置样式。新增了丰富的动画效果，让数字动起来！

实现原理

使用Vue 3的computed计算属性，将数字转换为字符串后分割成数组，然后通过v-for循环渲染每个数字。

主要特性

1. 总计数量显示

初始值：23897
显示效果：每个数字独立显示在紫色背景的容器中
动态更新：支持通过API调用更新数据
动画效果：数字滚动动画、发光效果、悬停缩放

2. 员工类型数量显示

正式员工：123人
外协人员：45人
访客：678人
每个数字类型都有独立的计算属性和更新方法
动画效果：脉冲动画、悬停效果、颜色变化

3. 响应式更新

所有数字都支持动态更新
数字变化时，显示会自动重新计算和渲染
动画效果：平滑的数字滚动、更新完成后的闪烁提示

4. 🎬 新增动画功能

数字滚动动画：数字从当前值平滑滚动到目标值
缓动效果：使用缓动函数让动画更自然流畅
视觉反馈：数字更新完成后的闪烁效果
悬停交互：鼠标悬停时的缩放和发光效果
周期性更新：可设置定时自动更新数据

代码结构

响应式数据

const totalCount = ref<number>(23897)
const formalEmployeeCount = ref<number>(123)
const externalStaffCount = ref<number>(45)
const visitorCount = ref<number>(678)

// 动画相关的状态
const isAnimating = ref<boolean>(false)
const animationDuration = 2000 // 动画持续时间（毫秒）

计算属性

const totalCountDigits = computed(() => {
  return String(totalCount.value).split('').map(Number)
})

动画方法

// 数字滚动动画方法
const animateNumber = (startValue: number, endValue: number, duration: number, callback: (value: number) => void)

// 批量更新所有数字的方法
const updateAllCounts = (counts: { total?: number, formal?: number, external?: number, visitor?: number })

// 测试动画方法
const testAnimation = () => { /* 生成随机数据并触发动画 */ }

// 重置到原始数据
const resetToOriginal = () => { /* 重置所有数据到初始值 */ }

使用方法

1. 更新总计数量

updateTotalCount(25678) // 会显示为 2 5 6 7 8，带动画效果

2. 更新员工数量

updateFormalEmployeeCount(156)    // 正式员工：1 5 6
updateExternalStaffCount(52)      // 外协人员：5 2
updateVisitorCount(789)           // 访客：7 8 9

3. 批量更新所有数据

updateAllCounts({
  total: 25678,
  formal: 156,
  external: 52,
  visitor: 789
})

4. 从API获取数据

// 示例：从API获取数据后更新显示
const fetchData = async () => {
  const response = await api.getEmployeeCount()
  updateAllCounts({
    total: response.totalCount,
    formal: response.formalCount,
    external: response.externalCount,
    visitor: response.visitorCount
  })
}

5. 测试动画效果

点击"测试动画"按钮：生成随机数据并触发动画
点击"重置数据"按钮：恢复到初始数据
动画进行中按钮会被禁用，防止重复触发

样式说明

总计数量样式

容器类：.number-wrapper
数字样式：.total-number
背景色：紫色 (rgb(177 74 201 / 100%))
尺寸：26px × 50px
动画效果：
- 持续发光效果 (numberGlow)
- 悬停缩放 (1.1倍)
- 更新完成闪烁效果 (flashEffect)

员工类型数字样式

容器类：.type-number-wrapper
数字样式：.type-number
背景色：绿色 (#1afb8f)
尺寸：14px × 25px
动画效果：
- 脉冲动画 (typeNumberPulse)
- 悬停缩放 (1.2倍) 和颜色变化
- 更新完成闪烁效果 (typeFlashEffect)

测试按钮样式

渐变背景：蓝紫色渐变
悬停效果：上移和阴影增强
禁用状态：半透明和禁用光标

动画特性详解

1. 数字滚动动画

持续时间：2秒（可配置）
缓动函数：easeOutQuart，让动画更自然
性能优化：使用requestAnimationFrame确保流畅

2. 视觉反馈动画

发光效果：数字容器持续发光，吸引注意力
悬停交互：鼠标悬停时的缩放和阴影变化
闪烁提示：数据更新完成后的白色闪烁效果

3. 动画状态管理

防重复触发：动画进行中禁止新的动画
批量更新：支持同时更新多个数字
完成回调：动画完成后的闪烁效果

注意事项

数字长度自适应：容器会根据数字的位数自动调整显示
性能优化：使用计算属性确保只在数据变化时重新计算
类型安全：使用TypeScript确保数据类型安全
响应式设计：支持不同屏幕尺寸的适配
动画性能：使用CSS动画和requestAnimationFrame确保流畅
防抖处理：动画进行中防止重复触发

扩展功能

可以基于此功能扩展：

更多动画类型：弹跳、旋转、淡入淡出等
数据可视化：图表动画、进度条动画
交互增强：拖拽、点击、手势等
主题切换：不同主题下的动画效果
性能监控：动画性能统计和优化建议
无障碍支持：动画开关、减少动画等辅助功能

演示效果

页面加载：5秒后自动更新到新数据
周期性更新：每15秒自动生成随机数据并触发动画
手动测试：点击测试按钮立即体验动画效果
数据重置：一键恢复到初始状态

现在你的数字不仅能够分割显示，还能生动地动起来！🎉

5.8 KiB Raw Blame History Unescape Escape