vue插件 vue-countTo

464 阅读1分钟

vue-countTo是一个无依赖,轻量级的vue组件,可以实现数字的滚动效果

属性描述类型默认值
startVal开始值Number0
endVal结束值Number2017
duration持续时间,以毫秒为单位Number3000
autoplay自动播放Booleantrue
decimals要显示的小数位数Number0
decimal十进制分割String.
separator分隔符String,
prefix前缀String‘’
suffix后缀String‘’
useEasing使用缓和功能Booleantrue
easingFn缓和回调Function

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

function函数

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

示例:

<head>
		<meta charset="utf-8" />
		<title>countTo</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="xdlove-vue-countTo-master/vue-countTo/dist/vue-count-to.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="aaa">
			<count-to class="example1" style="font-size:40px;" :start-val=0 :end-val=endnums :duration=3000></count-to>
		</div>
		
		
		<script type="text/javascript">
			
			var vm = new Vue({
				el:"#aaa",
				data:{
					startnums:30,
					endnums:100,
				},
				mounted:function(){
				
				},
				methods:{}
			})		
		</script>		
	</body>

效果:
在这里插入图片描述
vue-routerTo在大部分浏览器中都可以生效












一起学习,一起进步 -.- ,如有错误,可以发评论