vue数字滚动组件

<template>
  <div
    class="aird-digitalscroll"
    :style="{height:fontSize+'px',lineHeight:fontSize+'px'}"
  >
    <p
      v-for="(item,index) in computeNumber"
      :key="index"
      class="aird-digitalscroll__item"
      :style="{width:(fontSize/2+5)+'px',fontSize:fontSize+'px'}"
    >
      <span
        ref="numberDom"
        :style="{color:color,letterSpacing:fontSize+'px'}"
      >0123456789</span>
    </p>
  </div>
</template>

<script>
export default {
  name: 'BusiDigitalScroll',
  props: {
    number: {
      type: Number,
      default: 0,
    },
    color: {
      type: String,
      default: '#000000',
    },
    fontSize: {
      type: [String, Number],
      default: 12,
    },
  },
  data () {
    return {
      maxLen: 10, //最大长度
      computeNumber: [], //数字补零后分割为数组，遍历
      timeTicket: null,
    };
  },
  watch: {
    number () {
      this.refresh();
    },
  },
  mounted () {
    this.refresh();
    // this.increaseNumber();
  },
  destroyed () {
    window.clearTimeout(this.timeTicket);
    this.timeTicket = null;
  },
  methods: {
    /**
     * @description: 数字补零操作，返回数组
     * @param {number} num 被操作数
     * @param {number} n 总长度
     * @return:
     */

    prefixZero (num, n) {
      return (Array(n).join('') + num).slice(-n).split('');
      //   return num.slice(-n).split("");
    },
    /**
     * @description: 获取随机数
     * @param {type}
     * @return:
     */
    getRandomNumber (min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    // 设置每一位数字的偏移
    setNumberTransform () {
      const numberItems = this.$refs.numberDom;
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index];
        elem.style.transform = `translate(-50%,-${Number(
          this.computeNumber[index]
        ) * 10}%`;
      }
    },
    // 定时增长数字
    increaseNumber () {
      this.refresh();
      this.timeTicket = setTimeout(this.increaseNumber, 1000);
    },
    // 定时刷新数据
    refresh () {
      this.computeNumber = this.prefixZero(this.number, this.maxLen);
      this.$nextTick(() => this.setNumberTransform());
    },
  },
};
</script>

<style lang="scss" scoped>
.aird-digitalscroll {
  display: flex;
  justify-content: center;
  line-height: 100%;
  height: 100%;
  p {
    line-height: 100%;
    // flex: 1;
    width: 12px;
    height: 100%;
    text-align: center;
    display: inline-block;
    font-size: 20px;
    position: relative;
    writing-mode: vertical-lr;
    text-orientation: upright;
    overflow: hidden;
    &:last-child {
      margin-right: 0;
    }
    span {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: transform 2s ease 1s;
      letter-spacing: 10px;
      font-family: DigifaceWide;
    }
  }
}
</style>