vue数字滚动效果组件

//修改
chang(oldVal,newVal,id){
  if(oldVal >= newVal) return;
  let stepTime = this.stepTime;
  let time = Math.ceil((newVal - oldVal) / this.fontSize);
  time = stepTime / time;
  const dom = document.getElementById(id);
  // console.log(oldVal,newVal,id,dom);
  // console.log('time',time);
  oldVal += 0.5;
  if(oldVal >= 20){
    oldVal %= 20;
    newVal %= 20;
  }
  if(oldVal >= 10){
    oldVal %= 10;
    newVal %= 10;
    if(newVal < oldVal) newVal += 10;
  }
  dom.style.bottom = oldVal * this.fontSize + 'rem';
  setTimeout(()=>{
    this.chang(oldVal,newVal,id);
  },time);
},
//数据变化时触发，处理变化后的数据
numRolling(newVal,oldVal){
  this.oldVal = newVal;
  oldVal = parseFloat(oldVal).toFixed(this.fixNum).toString().split('');
  newVal = parseFloat(newVal).toFixed(this.fixNum).toString().split('');
  let headNum = this.headNum;
  //数位发生变化，前面补零
  while(oldVal.length < newVal.length){
    oldVal.unshift('0');
    headNum--;
    document.getElementById('num-content'+headNum).parentNode.style.display = 'flex';
  }
  //修改前置位标记数
  this.headNum = headNum;
  for(let i = 0; i < newVal.length; i++){
    let num = parseInt(newVal[i]);
    if(num >= 0 && num <= 9 ){
      let oldV = parseFloat(oldVal[i]),newV = parseFloat(newVal[i]);
      if(oldV > newV) newV += 10;
      this.chang(oldV,newV,'num-content'+(i + headNum));
    }
  }
}

npm i @jyeontu/jvuewheel -S

//引入组件库
import jvuewheel from '@jyeontu/jvuewheel'
//引入样式
import '@jyeontu/jvuewheel/lib/jvuewhell.css'
Vue.use(jvuewheel);

<j-num-rolling :nums = "nums" 
      :fixNum = "2" 
      :stepTime = "200" 
      :refreshTime = "2" 
      :fontSize = "4" 
      :numStyle = "numStyle">
</j-num-rolling>