Vue中数字滚动插件

1,104 阅读1分钟

安装:

npm i vue-count-to

使用方法:

<template>
  <countTo :startVal="startVal" :endVal="endVal" :duration="3000"></countTo>
</template>
<script>
import countTo from "vue-count-to";
export default {
  components: { countTo },
  data() {
    return {
      startVal: 0,
      endVal: 2019,
    };
  }
};
</script>
参数:
PropertyDescriptiontypedefault
startVal开始值Number0
endVal结束值Number2017
duration持续时间,以毫秒为单位Number3000
autoplay自动播放Booleantrue
decimals要显示的小数位数Number0
decimal十进制分割String.
separator分隔符String,
prefix前缀String''
suffix后缀String''
useEasing使用缓和功能Booleantrue
easingFn缓和回调Function

tip:当autoplay:true时,它将在startVal或endVal更改时自动启动

mountedCallback挂载以后返回回调
start开始计数
pause暂停计数
reset重置countTo