moving-numbers-vue3

moving-numbers-vue3

数据大屏 / 驾驶舱 / 统计面板的数字滚动、翻牌动画组件（Vue3）——数字从旧值平滑滚动到新值，支持快增、逐位定变轮盘、CSS 滚动三种模式，可选分位逗号与数字格。

English: Vue3 animated number component for data dashboards & cockpit displays — smooth count-up, digit-roll and CSS-scroll modes, thousand separators and digit cells. Zero dependencies.

快速开始

npm i moving-numbers-vue3 -S

快速应用

全局注入

import movingNumbers from 'moving-numbers-vue3';
import 'moving-numbers-vue3/index.css'; // ⚠️ 样式需手动引入
app.use(movingNumbers);

局部注入

import MovingNumbersLib from 'moving-numbers-vue3';
import 'moving-numbers-vue3/index.css';
// 注：产物为 default 导出，具名导入依赖 CJS 互操作、部分构建工具（如 Vite）下不可靠，请 default 导入后解构
const { MovingNumbers } = MovingNumbersLib;

TypeScript 与 AI 支持

• 自带 index.d.ts 类型声明（package.json types 字段已配置），安装后编辑器/AI 直接获得完整类型提示。
• 配套 AI.md：面向 AI 助手的使用指南（API 速查、最小示例、典型错误对照），AI 编码工具可直接读取。

与同类的区别（选型参考）

适用：数据大屏、驾驶舱、统计面板的金额 / 总量 / 指标跳动展示。 不适用：需要精确数字格式化（可看 ljs-tools 的 $LJSnum）；需要事件回调 / 插槽（纯展示组件）；SSR 场景。

主参数

示例 1：快增（默认）+ 分位逗号

<template>
  <MovingNumbers class="c1" :m-num="movingNumber" :quantile-show="true" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import MovingNumbersLib from 'moving-numbers-vue3';
import 'moving-numbers-vue3/index.css';

const MovingNumbers = MovingNumbersLib.MovingNumbers;
const movingNumber = ref(0);

onMounted(() => {
  setInterval(() => {
    movingNumber.value = (Math.random() * 1000000).toFixed(6);
  }, 5000);
});
</script>

示例 2：逐位定变（fix）+ 美元分位

<MovingNumbers
  class="c2"
  :m-num="movingNumber"
  mode="fix"
  :decimal="3"
  :quantile-show="true"
  :quantile-type="3" />

（其余写法同示例 1）

示例 3：CSS 滚动（scroll）

<MovingNumbers
  class="c3"
  :m-num="movingNumber"
  mode="scroll"
  :decimal="4"
  :quantile-show="true" />

（其余写法同示例 1；⚠️ mode 初始化后不可切换，三种模式同时展示时请各渲染一个组件）