vue-countTo---简单好用的一个数字滚动插件

小咪咪 2022-12-27 08:44 189阅读 0赞

vue-countTo是一个无依赖，轻量级的vue组件，可以自行覆盖easingFn。

你可以设置 startVal 和 endVal，它会自动判断计数或倒计时。支持vue-ssr。vue-countTo参考于countUp.js;

![bbdbdaf6587a2e5c57d6ead7dedb4312.gif][]

安装使用：

npm install 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: 2017
          }
        }
      }
    </script>

### 使用CDN脚本: [demo][] ###

### 选项 ###

<table> 
 <thead> 
  <tr> 
   <th>Property</th> 
   <th>Description</th> 
   <th>type</th> 
   <th>default</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>startVal</td> 
   <td>开始值</td> 
   <td>Number</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>endVal</td> 
   <td>结束值</td> 
   <td>Number</td> 
   <td>2017</td> 
  </tr> 
  <tr> 
   <td>duration</td> 
   <td>持续时间，以毫秒为单位</td> 
   <td>Number</td> 
   <td>3000</td> 
  </tr> 
  <tr> 
   <td>autoplay</td> 
   <td>自动播放</td> 
   <td>Boolean</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>decimals</td> 
   <td>要显示的小数位数</td> 
   <td>Number</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td>decimal</td> 
   <td>十进制分割</td> 
   <td>String</td> 
   <td>.</td> 
  </tr> 
  <tr> 
   <td>separator</td> 
   <td>分隔符</td> 
   <td>String</td> 
   <td>,</td> 
  </tr> 
  <tr> 
   <td>prefix</td> 
   <td>前缀</td> 
   <td>String</td> 
   <td>''</td> 
  </tr> 
  <tr> 
   <td>suffix</td> 
   <td>后缀</td> 
   <td>String</td> 
   <td>''</td> 
  </tr> 
  <tr> 
   <td>useEasing</td> 
   <td>使用缓和功能</td> 
   <td>Boolean</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>easingFn</td> 
   <td>缓和回调</td> 
   <td>Function</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

\*\* 注意：当autoplay：true时，它将在startVal或endVal更改时自动启动\*\*

### 功能 ###

<table> 
 <thead> 
  <tr> 
   <th>Function Name</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>mountedCallback</td> 
   <td>挂载以后返回回调</td> 
  </tr> 
  <tr> 
   <td>start</td> 
   <td>开始计数</td> 
  </tr> 
  <tr> 
   <td>pause</td> 
   <td>暂停计数</td> 
  </tr> 
  <tr> 
   <td>reset</td> 
   <td> <p>重置countTo</p> </td> 
  </tr> 
 </tbody> 
</table>

更多例子：[demo][demo 1]

[bbdbdaf6587a2e5c57d6ead7dedb4312.gif]: /images/20221120/5ebccfca0e4641f188753914a8dd5f2b.png
[demo]: https://github.com/PanJiaChen/vue-countTo/blob/master/demo/index.html
[demo 1]: http://panjiachen.github.io/countTo/demo/