countUp.vue

<template>
  <div class="chartNum">
    <div class="box-item">
      <!-- ['num_'+item] -->
      <li :class="{'number-item': !isNaN(item), 'mark-item': isNaN(item),'num':index<=currentIndex-1?true:false }" v-for="(item,index) in orderNum" :key="index">
        <span v-if="!isNaN(item)">
          <i ref="numberItem">0123456789</i>
        </span>
        <span class="comma" v-else>{{item}}</span>
      </li>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    count: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    count(newVal) {
      console.log(newVal);
      if (newVal >= 100000) {
        this.currentIndex = 0;
      } else if (newVal >= 10000) {
        this.currentIndex = 1;
      } else if (newVal >= 1000) {
        this.currentIndex = 2;
      } else if (newVal >= 100) {
        this.currentIndex = 3;
      } else if (newVal >= 10) {
        this.currentIndex = 4;
      } else if (newVal >= 0) {
        this.currentIndex = 5;
      }
      this.toOrderNum(newVal);
      this.setNumberTransform();
    },
  },
  data() {
    return {
      currentIndex: 0,
      orderNum: ["0", "0", "0", ",", "0", "0", "0"], // 默认订单总数
    };
  },
  mounted() {
    let newVal = this.count * 1;
    if (newVal >= 100000) {
      this.currentIndex = 0;
    } else if (newVal >= 10000) {
      this.currentIndex = 1;
    } else if (newVal >= 1000) {
      this.currentIndex = 2;
    } else if (newVal >= 100) {
      this.currentIndex = 3;
    } else if (newVal >= 10) {
      this.currentIndex = 4;
    } else if (newVal >= 0) {
      this.currentIndex = 5;
    }
    this.toOrderNum(this.count); // 这里输入数字即可调用
    this.setNumberTransform();
  },
  methods: {
    // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
      const numberArr = this.orderNum.filter((item) => !isNaN(item));
      for (let index = 0; index < numberItems.length; index++) {
        const elem = numberItems[index];
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
      }
    },
    // 处理总订单数字
    toOrderNum(num) {
      num = num.toString();
      // 把订单数变成字符串
      if (num.length < 6) {
        num = "0" + num; // 如未满八位数，添加"0"补位

        this.toOrderNum(num); // 递归添加"0"补位
      } else if (num.length === 6) {
        // 订单数中加入逗号
        num = num.slice(0, 3) + "," + num.slice(3, 6);
        this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组

        //this.setNumberTransform();
      } else {
        // 订单总量数字超过八位显示异常
        this.$message.warning("订单总量数字过大，显示异常，请联系客服");
      }
    },
  },
};
</script>
<style scoped lang='less'>
.num {
  i {
    opacity: 0;
  }
}
// .box-item {
//   .num_0 {
//     &:nth-child(1) {
//       i {
//         opacity: 0;
//       }
//     }
//   }
// }

// .chartNum {
//   &:nth-child(2) {
//     .number-item span {
//       opacity: 0 !important;
//     }
//   }
// }
/*订单总量滚动数字设置*/
.box-item {
  position: relative;
  height: 57px;
  font-size: 40px;
  line-height: 57px;
  text-align: center;
  list-style: none;
  color: #fff;
  writing-mode: vertical-lr;
  text-orientation: upright;
  /*文字禁止编辑*/
}

/* 默认逗号设置 */
.mark-item {
  width: 10px;
  height: 73px;
  margin-right: 5px;
  line-height: 10px;
  font-size: 40px;
  position: relative;

  & > span {
    position: absolute;
    width: 100%;
    bottom: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
}

/*滚动数字设置*/
.number-item {
  width: 38px;
  height: 57px;
  list-style: none;
  margin-right: 5px;
  background-image: url("data:image/png;base64,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");
  background-size: 100% 100%;

  & > span {
    position: relative;
    display: inline-block;
    margin-right: 20px;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;

    & > i {
      font-style: normal;
      position: absolute;
      top: 8px;
      left: 50%;
      transform: translate(-50%, 0);
      transition: transform 1s ease-in-out;
      letter-spacing: 10px;
      font-family: "fangsong";
      font-weight: 600;
    }
  }
}

.number-item:last-child {
  margin-right: 0;
}
</style>