0.2.0 • Published 5 years ago
z-animate-number v0.2.0
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>- 效果图