vue-countUp

How to use?

npm install vue-count-up-next

Example

<template>
  <countUp :startVal='startVal' :endVal='endVal' :duration='3000'></countUp>
</template>

<script lang = "ts" setup>
  import {ref} from vue
  import countUp from 'vue-count-up';
  let startVal:number = ref(0)
  let endVal:number = ref(2022)
</script>

demo:

Options

| 属性 | 说明 | 类型 | 默认值 | | ----------------- | ---------------- | :--------: | :----------: | | startVal | 开始的值 |Number| 0 | | endVal | 结束的值 |Number | 2022 | | duration | 持续时间 | Number | 3000 | | autoplay | 挂载完成后自动开始 | Boolean | true | | pause | 暂停/继续 | Boolean | false | | decimals | 小数的位数 | Number | 0 | | separator | 分隔整数和小数的符号 | String | , | | prefix | 前缀 | String | '' | | suffix | 后缀 | String | '' | | useEasing | 变速（默认逐渐缓慢） | Boolean | true | | easingFn | 自定义变速函数 | Function | — |

Functions

| Function Name | Description | | :--------: | ----- | | mountedCallback | 组件挂载时的回调 | | complete | 完成时的回调 | | start | 开始 | | reset | 重置 |