大屏实现数组滚动效果，组件封装

<template>
  <div class="number">
    <div v-for="(item, index) in num" :key="index">
      <div class="item">
        <ul class="ulnode">
          <li>0</li>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
          <li>6</li>
          <li>7</li>
          <li>8</li>
          <li>9</li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "CountNum",
  props: {
    numbers: String,
    num: {
      default: 8
    }
  },
  data() {
    return {
      number: "0",
      lastNumberArr: []
    }
  },
  watch: {
    numbers: {
      handler(val) {
        this.number = val
        this.handleNumberChange()
      },
      immediate: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      let nodeList = document.getElementsByClassName("ulnode")
      this.nodeList = nodeList
      this.handleNumberChange()
    })
  },
  methods: {
    handleNumberChange() {
      let numberArr = this.number.toString().split("")
      if (numberArr.length < this.num) {
        let fillTimes = this.num - numberArr.length
        for (var i = 0; i < fillTimes; i++) {
          numberArr.unshift(0)
        }
      }
      if (this.nodeList) {
        numberArr.forEach((item, index) => {
          if (this.nodeList[index] && this.lastNumberArr[index] !== item) {
            this.nodeList[index].style.transform = `translateY(-${10 * item}%)`
          }
        })
        // 存储上一次的12位数组用于对比
        this.lastNumberArr = numberArr;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.number {
  display: flex;
  justify-content: center;
  .item {
    width: 65px;
    height: 75px;
    line-height: 75px;
    margin-right: 20px;
    text-align: center;
    font-size: 50px;
    background-image: url("../assets/images/agriculture/Farm/sj.png");
    background-size: 100% 100%;
    overflow: hidden;

    ul {
      padding: 0;
      margin: 0;
      transform: translateY(-0%);
      transition: transform 0.5s linear 0.1s;
      width: 100%;
      list-style-type: none;
      li {
        font-size: 55px;
        font-weight: bold;
        color: #fdfffe;
        background: linear-gradient(0deg, #28FFB1 0%, #F5FFFB 99.31640625%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        color: #FFA303;
      }
    }
  }
}
</style>