Vue3数字动效插件-Vue3 AutoCounter

1. 安装

npm install vue3-autocounter

2. 使用

<vue3-autocounter 
	ref="counterRef"
    :start-amount="countForm.startAmount"
    :end-amount="countForm.endAmount"
    :duration="countForm.duration"
    :prefix="countForm.prefix"
    :suffix="countForm.suffix"
    :separator="countForm.separator"
    :decimal-separator="countForm.decimalsSeparator"
    :decimals="countForm.decimals"
    :autoinit="countForm.autoinit"
/>

<script lang="ts" setup name='AutoCount'>
import Vue3Autocounter from 'vue3-autocounter';

const countForm = ref({
  startAmount: 0,
  endAmount: 2022,
  duration: 3,
  prefix: '',
  suffix: '',
  separator: '',
  decimals: 0,
  decimalsSeparator: '',
  autoinit: false
})
<script>

3. Api

1. Properties

• start-amount：起始值
• end-amount：结束值
• duration：持续时长
• prefix：前缀
• suffix：尾缀
• separator：分隔符(千位分隔符)
• decimal-separator：小数分隔符
• decimals：小数位
• autoinit：是否自动执行动画

2. Methods

• start()：开始
• pause()：暂停
• resume()：恢复
• reset()：重置

3. Event

• @finished：动画执行完毕后可以调用

4. 最终效果