【vue】vue-count-to(数字滚动)插件:

文章目录

        • 一、效果:
        • 二、使用:
            • 【1】安装插件
            • 【2】案例
        • 三、Options
        • 四、Functions


一、效果:

【vue】vue-count-to(数字滚动)插件:_第1张图片

二、使用:

官方文档:
github地址——https://github.com/PanJiaChen/vue-countTo

npm地址——https://www.npmjs.com/package/vue-count-to

【1】安装插件
npm install vue-count-to
【2】案例
<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>
三、Options
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
四、Functions
Function Name Description
mountedCallback 挂载以后返回回调
start 开始计数
pause 暂停计数
reset 重置countTo

你可能感兴趣的:(Vue框架,vue.js,前端,javascript)