z-animate-number 基于 Vue 的数字动画组件

数字动画组件可以让你的数字初始化或则修改变化时可以动画过渡

安装

npm i -S z-animate-number

使用

全局

// 在根文件注册
import ZAnimateNumber from "z-animate-number";

Vue.use(ZAnimateNumber);

局部

import { ZAnimateNumber } from 'z-animate-number'
...
components: {
  ZAnimateNumber
}
...

参数描述

| 参数 | 描述 | 类型 | 默认 | 是否必选 | | --------- | -------------------- | :------: | ---------------------------------------------------------------------------------------------------- | :------: | | start | 动画其实数字 | Number | 0 | 否 | | end | 期望的结果数字 | Number | 0 | 否 | | duration | 动画时长，单位为ms | Number | 3000 | 否 | | autoplay | 自动动画 | Boolean | true | 否 | | decimals | 保留的小数个数 | Number | 0 | 否 | | decimal | 整数与小数的分割符 | String | '' | 否 | | separator | 三进位的分割符 | String | ',' | 否 | | prefix | 在数字前需要加前缀 | String | '' | 否 | | suffix | 在数字后需要加的后缀 | String | '' | 否 | | useEasing | 动画函数 | Boolean | true | 否 | | easingFn | 动画函数 | Function | function (t, b, c, d) { return (c _ (-Math.pow(2, (-10 _ t) / d) + 1) * 1024) / 1023 + b } | 否 |

示例

保留两位小数

• 示例代码

...
<z-animate-number
    :end="9999.56"
    :decimals="2"
    decimal='.'
></z-animate-number>
...

• 效果图
  

添加前缀

• 示例代码

...
<z-animate-number
    :end="9999"
    prefix="$"
></z-animate-number>
...

• 效果图
  

添加后缀

• 示例代码

...
<z-animate-number
    :end="12387"
    sufffix="元"
></z-animate-number>

• 效果图
  

设置动画时间

• 示例代码

...
<z-animate-number
    :end="65646"
    :duration="5000"
></z-animate-number>

• 效果图