数字翻牌器组件

 滚动过程中截图

 滚动结束截图

 

实现原理：将0123456789十个数字一一纵向排列，设置高度只显示一个数字，使用transform: translate变换显示数字，代码如下：

<template>
  <div class="chartNum">
    <div class="box-item">
      <div
        v-for="(item, index) in orderNum"
        :key="index"
        :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
      >
        <span>
          <i ref="numberItem">0123456789</i>
        </span>
        <span
          v-if="(index+1)%3===0&&index!==orderNum.length-1"
          class="comma"
          style="position: absolute;left: 1.89vw;top: 1vw;"
        >,</span>
        <span
          v-if="index===orderNum.length-1&&!isNaN(item)"
          style="position: absolute;left: 2.1vw;top: 2.5vw;font-weight: 500;font-size: 0.9vw;font-family: none;"
          class="comma"
        >
          元
        </span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    // 显示的数字
    number: {
      type: Number,
      default: 0
    },
    // 显示的长度
    length: {
      type: Number,
      default: 9
    }
  },
  data() {
    return {
      orderNum: [] // 默认总数
    }
  },
  watch: {
    number: {
      handler(val) {
        this.toOrderNum(val)
      },
      deep: true
    }
  },
  mounted() {
    this.orderNum = []
    for (let i = 0; i < this.length; i++) {
      this.orderNum.push('0')
    }
    setTimeout(() => {
      this.toOrderNum(this.number) // 这里输入数字即可调用
    }, 500)
  },
  methods: {
    // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
      // 结合CSS 对数字字符进行滚动,显示数量
      for (let index = 0; index < this.orderNum.length; index += 1) {
        const elem = numberItems[index]
        elem.style.transform = `translate(-50%, -${this.orderNum[index] * 10}%)`
      }
    },
    // 处理总数字
    toOrderNum(num) {
      const numtext = num.toString()
      if (this.length) {
        if (numtext.length < this.length) {
          const numlist = `0${numtext}` // 如未满固定数，添加"0"补位
          this.toOrderNum(numlist) // 递归添加"0"补位
        } else if (numtext.length === this.length) {
          this.orderNum = numtext.split('')
        }
      } else {
        this.orderNum = numtext.split('')
      }
      this.setNumberTransform()
    }
  }
}
</script>
<style scoped lang="scss">
.chartNum{
  color: #409eff;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  /*总量滚动数字设置*/
  .box-item {
    font-size: 4.2vw;
    font-family: "impact", serif;
    display: flex;
    align-items: center;
  }
  /* 默认逗号设置 */
  .mark-item {
    width:2.6vw;
    height: 5.2vw;
    text-align: center;
    margin-left: -1vw;
  }
  /*滚动数字设置*/
  .number-item {
    width: 2.7vw;
    height: 5.2vw;
    margin-right: 1vw;
    position: relative;
    /* 背景图片 */
    background-image: url("~@/assets/images/masterSelection/number-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    & > span {
      position: relative;
      margin-right: 10px;
      width: 100%;
      height: 100%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      & > i {
        font-style: normal;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        transition: transform 1s ease-in-out;
        letter-spacing: 10px;
      }
    }
    &:last-child{
      margin-right: 0;
    }
  }
  .unit{
    font-weight: 500;
    font-size: 0.9vw;
    margin-left: 0.3vw;
  }
}
</style>