vue-count-to是一个没有依赖的轻量级vue组件,可以自行覆盖EasingFn。 可以设置 startVal 和 endVal,它会自动判断计数进行数字渲染。 支持vue-ssr。vue-count-to参考于countUp.js;
安装使用:
npm install vue-count-to
例子:
<template>
<span class="percent-text-1">
每日增长率:
<count-to
:start-val="startPercent"
:end-val="growthLastDay"
:duration="1000"
:decimals="2"
suffix="%"
/>
</span>
</template>
<script>
import countTo from 'vue-count-to';
export default {
components: { countTo },
props: {
todayUser: Number,
growthLastDay: {
type: Number,
default: 0
}
},
setup(props) {
const startVal = ref(0)
const startPercent = ref(0)
const updateStartVal = () => {
startVal.value = props.todayUser
startPercent.value = props.growthLastDay
}
return {
startVal,
startPercent
}
}
}
</script>
参数选项:
| Property | Description | type | default |
|---|---|---|---|
| startVal | 开始值 | Number | 0 |
| endVal | 结束值 | Number | 2017 |
| duration | 持续时间,以毫秒为单位 | Number | 3000 |
| autoplay | 自动播放 | Boolean | true |
| decimals | 要显示的小数位数 | Number | 0 |
| decimal | 十进制分割 | String | . |
| separator | 分隔符 | String | , |
| prefix | 前缀 | String | '' |
| suffix | 后缀 | String | '' |
| useEasing | 使用缓和功能 | Boolean | true |
| easingFn | 缓和回调 | Function | — |
** 注意:当autoplay:true时,它将在startVal或endVal更改时自动启动**
功能:
| Function Name | Description |
|---|---|
| mountedCallback | 挂载以后返回回调 |
| start | 开始计数 |
| pause | 暂停计数 |
| reset | 重置countTo |