vue中设置 定时出现100000000￥以内的随机滚动数字

<template>
  <div class="about">
    <div class="chartNum">
      <div class="box-item">
        <div>￥</div>
        <div
          :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
          v-for="(item, index) in getarr"
          :key="index"
        >
          <span v-if="!isNaN(item)">
            <i ref="numberItem">0123456789</i>
          </span>
          <span class="comma" v-else>{{ item }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
/*订单总量滚动数字设置*/
.box-item {
  width: 12%;
  text-align: center;
  line-height: 70px;
  font-size: 8rem;
  padding: 2% 0;
  position: relative;
  list-style: none;
  writing-mode: vertical-lr;
  text-orientation: upright;
  /*文字禁止编辑*/
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
}

/* 默认逗号设置 */
.mark-item {
  width: 10px;
  height: 100px;
  margin-right: 5px;
  line-height: 10px;
  font-size: 48px;
  position: relative;
}
.mark-item span {
  position: absolute;
  width: 100%;
  bottom: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
/*滚动数字设置*/
.number-item {
  margin-left: 26%;
  width: 100px;
  height: 145px;
  list-style: none;
  margin-right: 5px;
  border-radius: 4px;
  border: 1px solid rgba(221, 221, 221, 1);
  /* background-image: url("../images/mmm.png"); */
  background-size: 100% 100%;
}

.number-item:first-child {
  margin-left: 0;
}

.number-item span {
  position: relative;
  display: inline-block;
  margin-right: 10px;
  width: 100%;
  height: 100%;
  writing-mode: vertical-rl;
  text-orientation: upright;
  overflow: hidden;
}

.number-item span i {
  font-style: normal;
  position: absolute;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
  transition: transform 0.5s ease-in-out;
  letter-spacing: 10px;
}

.number-item:last-child {
  margin-right: 0;
}
</style>
<script>
export default {
  data() {
    return {
      orderNum: '000,000,000', // 默认展示数字格式
    };
  },
  computed:{
    getarr(){
      return this.orderNum.split('')
    }
  },
  mounted() {
    this.increaseNumber()
  },
  methods: {
    //封装随机数
    getRandomNumber(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    // 定时加入随机数
    increaseNumber() {
      let self = this;
      this.timer = setInterval(() => {
        self.setNumberTransform();
        //padstart(length,string) 头部添加字符串
        //设置 出现1-100000000之间的滚动数字
        self.orderNum = self.getRandomNumber(1,100000000).toString().padStart(9,'0').slice(0,3)+','+self.getRandomNumber(1,100000000).toString().padStart(9,'0').slice(3,6)+','+self.getRandomNumber(1,100000000).toString().padStart(9,'0').slice(6,9);
      }, 2000);
    },
    // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
      const numberArr = this.getarr.filter((item) => !isNaN(item));
      // 结合CSS 对数字字符进行滚动,显示订单数量
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index];
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
      }
    },
  },
};
</script>