vue-number-display-2

🎯 Vue2 数字滚动展示组件，支持自定义长度、前导零、标题、背景图片等丰富功能。提供流畅的数字滚动动画效果，适用于数据展示、计数器、仪表盘等场景。

✨ 特性

• 🎬 流畅动画：支持数字滚动动画，可自定义动画时长
• 🎨 高度可定制：支持自定义数字样式、背景图片、颜色等
• 🔢 前导零支持：可选择是否显示前导零，并为前导零设置不同样式
• 📏 灵活尺寸：支持自定义数字容器宽高、字体大小、间距等
• 🏷️ 标题显示：支持添加标题文本并自定义样式
• 🖼️ 背景图片：内置背景图片，也支持自定义背景图片
• 🎯 渐变色支持：支持CSS渐变色文字效果
• 📱 响应式：支持不同屏幕尺寸适配

📦 安装

npm install vue-number-display-2 --save
# 或
yarn add vue-number-display-2

🚀 快速开始

全局注册

import Vue from 'vue'
import VueNumberDisplay from 'vue-number-display-2'

// 方式一：注册整个插件
Vue.use(VueNumberDisplay)

// 方式二：只注册组件
Vue.component('NumberDisplay', VueNumberDisplay.NumberDisplay)

局部注册

import { NumberDisplay } from 'vue-number-display-2'

export default {
  components: {
    NumberDisplay
  }
}

基本使用

<template>
  <div>
    <!-- 最简单的使用 -->
    <NumberDisplay :value="123456" />
  </div>
</template>

📋 API 文档

Props 属性

| 属性名 | 类型 | 默认值 | 说明 | |--------|------|--------|------| | value | Number\|String | - | 要显示的数字（必填） | | minLength | Number | 6 | 最小显示位数，当启用前导零时生效 | | hasZeroPrefix | Boolean | false | 是否显示前导零 | | title | String | '' | 标题文本 | | digitWidth | Number\|String | 40 | 数字容器宽度（px） | | digitHeight | Number\|String | 54 | 数字容器高度（px） | | fontSize | Number\|String | 30 | 数字字体大小（px） | | titleFontSize | Number\|String | 16 | 标题字体大小（px） | | textColor | String | 'linear-gradient(to bottom, #FFFFFF, #7FC4FC)' | 数字颜色，支持纯色和渐变色 | | titleColor | String | 'white' | 标题颜色 | | showBackground | Boolean | true | 是否显示背景图片 | | backgroundImage | String\|Object | '' | 普通数字背景图片 | | zeroBackgroundImage | String\|Object | '' | 前导零背景图片 | | digitSpacing | Number\|String | 2 | 数字间距（px） | | animationDuration | Number | 800 | 动画持续时间（毫秒） |

🎨 使用示例

基础示例

<template>
  <div>
    <!-- 最简单的使用 -->
    <NumberDisplay :value="123456" />
  </div>
</template>

<script>
import { NumberDisplay } from 'vue-number-display-2'

export default {
  components: {
    NumberDisplay
  }
}
</script>

前导零示例

<template>
  <div>
    <!-- 启用前导零，最小6位数 -->
    <NumberDisplay 
      :value="123" 
      :minLength="6" 
      :hasZeroPrefix="true"
      title="订单号"
    />
    <!-- 显示：000123 -->
  </div>
</template>

自定义样式示例

<template>
  <div>
    <!-- 自定义尺寸和颜色 -->
    <NumberDisplay 
      :value="9876" 
      title="总销量"
      :digitWidth="50"
      :digitHeight="60"
      :fontSize="36"
      :titleFontSize="18"
      textColor="#FF5722"
      titleColor="#2196F3"
      :digitSpacing="4"
    />
  </div>
</template>

渐变色文字示例

<template>
  <div>
    <!-- 使用渐变色文字 -->
    <NumberDisplay 
      :value="88888" 
      title="会员积分"
      textColor="linear-gradient(45deg, #FFD700, #FFA500)"
      titleColor="#333"
    />
  </div>
</template>

自定义背景图片示例

<template>
  <div>
    <!-- 使用自定义背景图片 -->
    <NumberDisplay 
      :value="12345" 
      :hasZeroPrefix="true"
      :minLength="6"
      :backgroundImage="require('@/assets/custom-bg.png')"
      :zeroBackgroundImage="require('@/assets/zero-bg.png')"
      title="用户ID"
    />
  </div>
</template>

无背景图片示例

<template>
  <div>
    <!-- 不显示背景图片 -->
    <NumberDisplay 
      :value="999999" 
      :showBackground="false"
      textColor="#333"
      title="访问量"
      titleColor="#666"
    />
  </div>
</template>

动画时长示例

<template>
  <div>
    <!-- 自定义动画时长 -->
    <NumberDisplay 
      :value="count" 
      :animationDuration="1500"
      title="实时计数"
    />
    <button @click="updateCount">更新数字</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    updateCount() {
      this.count = Math.floor(Math.random() * 999999)
    }
  }
}
</script>

🎯 应用场景

• 数据大屏：展示实时数据统计
• 仪表盘：显示关键业务指标
• 计数器：用户积分、访问量等
• 订单系统：订单号、流水号显示
• 游戏界面：分数、等级显示
• 金融应用：金额、汇率展示

📄 许可证

MIT © liufeiyu