1.1.2 • Published 2 years ago
accumulation-animation v1.1.2
accumulation-animation
简介
为你的数据添加动态递增效果😀!
文档
入门
安装
npm i accumulation-animation
使用
🚀你可以在Dom任何绑定数据的地方使用它
这里拿element的表格举例📕:
1、引入组件
全局引用(main.js中)
import accumulationAnimation from 'accumulation-animation';
Vue.use(accumulationAnimation)
按需加载
import { accumulationAnimation } from 'accumulation-animation'
components: {
accumulationAnimation
},
2、挂载组件
<el-table-column prop="percentage" label="比例" width="180" align="center">
<template slot-scope="scope" style="color: #42b983">
<accumulationAnimation
:style="{color: 'red'}"
:number="Number(scope.row.percentage)"
:max-number="100"
:unit="'%'"
/>
</template>
</el-table-column>
选项
number(必选)
- 类型:
Number
- 默认值:
0
- 描述:需要添加效果的数据值
speed(可选)
- 类型:
Number?
- 默认值:
20
- 描述:设置基准数据增速
maxNumber(可选)
- 类型:
Number?
- 默认值:
0
- 描述:对照数据组最大值;默认所有数据增速一致(不同时结束),当需要控制动态增速使数据递增动效同时结束时,可设置此选项
unit(可选)
- 类型:
String?
- 默认值:
""
- 描述:数据单位(可以添加任何你想展示的值)
作者
QQ:1415580200