vue-number-display-2/README.md

Vue数字滚动展示组件，支持自定义长度、前导零、标题等

# vue-number-display-2

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

## ✨ 特性

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

## 📦 安装

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

## 🚀 快速开始

### 全局注册

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

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

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

### 局部注册

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

export default {
  components: {
    NumberDisplay
  }
}
```

### 基本使用

```vue
<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` | 动画持续时间（毫秒） |

## 🎨 使用示例

### 基础示例

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

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

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

### 前导零示例

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

### 自定义样式示例

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

### 渐变色文字示例

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

### 自定义背景图片示例

```vue
<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>
```

### 无背景图片示例

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

### 动画时长示例

```vue
<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](LICENSE) © liufeiyu