封装vue 数字滚动组件

<template>
  <div class="number">
    <div class="box-item">
      <li
        :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
        v-for="(item, index) in orderNum"
        :key="index"
        v-cloak
      >
        <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: ['list'],
  data() {
    return {
      orderNum: ['0', '0', '0', '0', '0', '0', '0', '0', '0', '0'], // 默认订单总数
    }
  },
  computed: {},

  mounted() {
    setTimeout(() => {
      this.toOrderNum(this.list) // 这里输入数字即可调用
    }, 500)
  },
  methods: {
    // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
      console.log(numberItems);
      const numberArr = this.orderNum.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}%)`
      }
    },
    // 处理总订单数字
    toOrderNum(num) {
      num = num.toString()
      // 把订单数变成字符串
      if (num.length < 10) {
        num = '0' + num // 如未满10位数，添加"0"补位
        this.toOrderNum(num) // 递归添加"0"补位
      } else if (num.length === 10) {
        // 订单数中加入逗号
        console.log(num)
        // num = num.slice(0, 3) + ',' + num.slice(4, 7) + ',' + num.slice(8, 10)
        this.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组
      } else {
        // 订单总量数字超过10位显示异常
        alert('超出最大显示攻击数量')
      }
      this.setNumberTransform()
    },
  },
}
</script>

<style scoped>
/* 翻牌器样式 start*/
[v-cloak] {
  display: none;
}
.box-item {
  position: relative;
  font-size: 1.8vw;
  overflow: hidden;
  list-style: none;
  color: #44D4FE;
  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 {
  position: relative;
}
.mark-item span {
  position: absolute;
  width: 100%;
  bottom: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
}
/*滚动数字设置*/
.number {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.number-item,.mark-item {
  width: 1.8vw;
  height: 2.6vw;
  /* 数字后面的背景图片 */
 /* background: url('') no-repeat center center;*/
  background-size: 100% 100%;
  list-style: none;
  margin-right: 8px;
  border-radius: 4px;
}
.number-item span {
  position: relative;
  display: inline-block;
  margin-right: 14px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -moz-transform:translateY(20%); /* 兼容火狐 */
}
.number-item span i {
  font-style: normal;
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translate(-50%, 0);
  transition: transform 1s ease-in-out;
  letter-spacing: 10px;
}
.number-item:last-child {
  margin-right: 0;
}
/* 翻牌器end */

</style>