Vue 数字翻牌器

<!--
    翻牌器组件
    注意：传入的数据需要 Number 类型
-->
<template>
  <div class="NumberCard" id="NumberCard">
    <ul>
      <li class="number-box" v-for="(item, index) in numberList" :key="index">
        <!-- 背景 -->
        <div class="bgt"></div>
        <!-- 翻牌效果的背景 -->
        <div class="bgt" :ref="'bg' + index"></div>
        <!-- 数字 -->
        <p>{{ item }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'NumberCard',
  data() {
    return {
      numberList: [0, 0, 0],
      numList: [],
    }
  },
  props: {
    numberProp: {
      type: Number,
      default: 0,
    },
  },
  watch: {
    numberProp: {
      handler: function (val) {
        // 重置数据
        this.numberList = [0, 0, 0]
        this.numList = val.toString().split('')
        this.numberListArray(this.numList.length)
        // 循环放在dom生成后面，避免dom未生成导致的 undefined
        this.$nextTick(() => {
          this.numList.forEach((element, index) => {
            // 加载动画，翻牌效果
            this.$refs['bg' + index][0].className = 'bgt number-keyframes '
            // 延迟累加数据
            var dataSet = setInterval(() => {
              if (Number(element) > this.numberList[index]) {
                this.$set(this.numberList, index, this.numberList[index] + 1)
              } else {
                // 关闭计时器
                clearInterval(dataSet)
                // 关闭动画
                this.$refs['bg' + index][0].className = 'bgt'
              }
              // 该延迟要比动画延迟小0.2s，避免js未执行动画先执行，导致的闪烁
            }, 300)
          })
        })
      },
      deep: true,
    },
  },
  methods: {
    // 这一步可以放在 numList 的循环里，根据 length 的数量 push 进 numberList，抽出来只是提前取值，放在 nextTick 前面
    numberListArray(key) {
      switch (key) {
        case 1:
          this.numberList = [0]
          break
        case 2:
          this.numberList = [0, 0]
          break
        case 3:
          this.numberList = [0, 0, 0]
          break
        case 4:
          this.numberList = [0, 0, 0, 0]
          break

        default:
          break
      }
    },
  },
}
</script>

<style lang="less" scope>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  li {
    margin: 0 4px;
    position: relative;
    .bgt {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('./count_bg.png') no-repeat;
      background-size: contain;
      z-index: 0;
    }
    p {
      margin: 0;
      padding: 0;
    }
  }
}
.number-box {
  p {
    position: absolute;
    z-index: 2;
    font-size: 80px;
    color: #002a3d;
    width: 80px;
    height: 110px;
    line-height: 110px;
    text-align: center;
  }
  width: 80px;
  height: 110px;
  line-height: 110px;
  text-align: center;
}
@keyframes number-transform-rotate {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-180deg);
  }
}
.number-keyframes {
  animation: number-transform-rotate 0.32s ease-in infinite;
}
</style>

附背景图一张