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"], // 默认总数
        };
      },
      mounted() {
        setTimeout(() => {
          this.toOrderNum(777777); // 这里输入数字即可调用
        }, 500);
      },
      watch: {
        number: {
          handler(val) {
            this.toOrderNum(val);
          },
          deep: true,
        },
      },
      methods: {
        // 设置文字滚动
        setNumberTransform() {
          const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量 // eslint-disable-next-line no-restricted-globals
          const numberArr = this.orderNum.filter((item) => !isNaN(item));
          console.log(numberItems.length, numberArr); // 结合CSS 对数字字符进行滚动,显示数量
          for (let index = 0; index < numberItems.length; index += 1) {
            const elem = numberItems[index];
            elem.style.transform = `translate(-50%, -${numberArr[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 === num.length) {
              this.orderNum = numtext.split(""); // 将其便变成数据，渲染至滚动数组
            }
          } else {
            this.orderNum = numtext.split("");
          } // 数字中加入逗号 // const length = numtext.length / 3; // let count = ''; // for (let i = 0; i < length; i += 1) { //   if (i === 0) { //     count += `${numtext.slice(i, i + 3)},`; //     console.log(count); //   } else if (i === length - 1) { //     count += numtext.slice(i * 3, i * 3 + 3); //     console.log(count); //   } else { //     count += `${numtext.slice(i * 3, i * 3 + 3)},`; //     console.log(count); //   } // } // this.orderNum = count.split('');
          this.setNumberTransform();
        },
      },
    };
    </script>

    <style scoped lang="scss">
    /*总量滚动数字设置*/
    .box-item {
      position: relative;
      height: 34px;
      font-size: 20px;
      font-family: AzonixRegular;
      color: #021c25;
      line-height: 41px;
      text-align: center;
      list-style: none;
      writing-mode: vertical-lr;
      text-orientation: upright;
    }
    /* 默认逗号设置 */
    .mark-item {
      width: 28px;
      height: 34px;
      position: relative;
      /* 背景图片 */
      background: url('../../assets/img/shuziluang@2x.png') no-repeat center
        center;
      background-size: 100% 100%;
      list-style: none;
      margin-right: 1px;
      & > span {
        position: absolute;
        width: 100%;
        height: 100%;
        bottom: 2px;
        left: 20%;
        font-size: 20px;
        writing-mode: vertical-rl;
        text-orientation: upright;
      }
    }
    /*滚动数字设置*/
    .number-item {
      width: 28px;
      height: 34px;
      /* 背景图片 */
     background: url('../../assets/img/shuziluang@2x.png') no-repeat center
        center;
      background-size: 100% 100%;
      // background: #ccc;
      list-style: none;
      margin-right: 1px;
      & > span {
        position: relative;
        display: inline-block;
        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: 8px;
          left: 50%;
          transform: translate(-50%, 0);
          transition: transform 1s ease-in-out;
          letter-spacing: 10px;
        }
      }
    }
    .number-item:last-child {
      margin-right: 0;
    }
    </style>

//另外页面引用

<template>
 <!-- 翻牌器 -->
<flop :num="456"></flop>
</template>

import flop from '@/components/parkScreen/flop' //翻牌器


 export default {
    name: 'parkScreen',
    data() {
        return {}
       }，
 components: {
	  flop
    },
    }