数字动态翻牌器

数字动态翻牌器

最近项目里使用到了数字翻牌器，于是自己写了一个，动态的翻牌器

第一步创建一个组件页面，NumberCount.vue

思路：大概就是显示几位数，然后从0开始滚动到当前的数值的位置，在每一个位置都有0-9的数，然后就是往上滚动当前数值的次数到当前的数，话不多说上代码

<template>
  <div class="chartNum">
    <div class="box-item">
      <li
        :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
        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: {
   
    // 显示的数字
    number: {
   
      type: Number,
    },
    // 显示的长度
    length: {
   
      type: Number,
    },
  },
  data() {
   
    return {
   
      orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'