vue数字滚动组件——vue-count-to
vue数字滚动组件——vue-count-togithub地址——https://github.com/PanJiaChen/vue-countTonpm地址——https://www.npmjs.com/package/vue-count-to效果1、安包npm install vue-count-to2、示例<template><countTo :startVal='star
·
vue数字滚动组件——vue-count-to
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: 1000,
endVal: 2017
}
}
}
</script>
3、实例
<div style="color: red;font-size: 32px;">
<span>合计:</span>
<span >¥</span>
<countTo :startVal='startVal' :endVal='endVal' :duration='3000'></countTo>
<span >元</span>
</div>
效果
4、选项
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 |
更多例子:demo——http://panjiachen.github.io/countTo/demo/
demo源码——https://github.com/PanJiaChen/vue-countTo/blob/master/demo/index.html
更多推荐
已为社区贡献9条内容
所有评论(0)