vue插件 vue-countTo

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

属性 描述 类型 默认值
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函数

函数名 描述
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在大部分浏览器中都可以生效












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

猜你喜欢

转载自blog.csdn.net/qq_36171287/article/details/108435489