基於vue的原生js數字滾動
阿新 • • 發佈:2021-10-25
//呼叫方式 <CountTo :end-val="100" :decimals="2" :duration="1000"/>
//元件
<template> <span> {{currentVal.toFixed(this.decimals)}} </span> </template> <script> export default { name:'CountTo', props:{ endVal:{ type:Number, default:2021//結束值}, decimals:{ type:Number, default: 0//小數位數 }, duration:{ type:Number, default: 1000//滾動持續時間 } }, watch:{ endVal:{ handler(){ this.currentVal=0; }, immediate:true } }, computed:{ interval(){return this.decimals>0?this.duration/(this.endVal*10^this.decimals):this.duration/this.endVal//每次增加單位值所需時間 }, limit(){ return this.decimals>0?1/(10^this.decimals):1//每次增加值 } }, data () { return { timer:null, currentVal:0//當前值 } }, methods:{ reset(){//重置為0 this.currentVal=0 if(this.timer){ clearTimeout(this.timer) this.timer=null; } }, start(){ this.loop(); }, loop(){ this.timer=setTimeout(()=>{//setTimeout最小間隔10毫秒,調整單位最小值及每10毫秒所需增加的值 if(this.currentVal<this.endVal){ this.currentVal+=+(this.limit*10/this.interval).toFixed(this.decimals); } this.loop() },10) }, }, mounted() { this.loop() }, beforeDestroy() { if(this.timer){ clearTimeout(this.timer) } } } </script>