vue实现 金额数字单个上下滚动切换

话不多少，主要是自己记录下以便后期查看templatediv class=chartNumdiv class=box-itemli :class={number-item: !isNaN(item), mark-item: isNaN(item) }v-for=(item,index) in orderNum:key=...

话不多少，主要是自己记录下以便后期查看

<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 {
    data() {
      return {
        orderNum: [ '0', '0','.', '0', '0'], 
      }
    },
    mounted() {
      this.toOrderNum(12.35) // 这里输入数字即可调用
      this.setNumberTransform()

      
      setTimeout(() => {
        this.toOrderNum(12.28)
        this.setNumberTransform()
      }, 2000);
    },
    methods: {
      // 设置文字滚动
      setNumberTransform() {
        const numberItems = this.$refs.numberItem // 拿到数字的ref，计算元素数量
        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) {
        console.log('11111')
        num = num.toString()
        console.log(num.length)
        if (num.length === 5) {
          this.orderNum = num.split('') // 将其变成数据，渲染至滚动数组
          console.log(this.orderNum,'this.orderNum')
        }
      },
    
    },
  }
</script>

<style lang='less'>

 
  /*金额滚动数字设置*/
  .box-item {
    width: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 24px;
    padding: 2% 0;
    position: relative;
    list-style: none;
    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 {
    width: 10px;
    line-height: 10px;
    font-size: 24px;
    position: relative;
  }
  .mark-item span {
    position: absolute;
    width: 100%;
    bottom: 0;
    writing-mode: vertical-rl;
    text-orientation: upright;
  }
  /*滚动数字设置*/
  .number-item {
    width: 20px;
    height: 30px;
    list-style: none;
    margin-right: 5px;
    background-size: 100% 100%;
 
  }
 
  .number-item:first-child {
    margin-left: 0;
  }
 
  .number-item span {
    position: relative;
    display: inline-block;
    margin-right: 10px;
    width: 100%;
    height: 100%;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
 
  }
 
  .number-item span i {
    font-style: normal;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%,0);
    transition: transform .5s ease-in-out;
    letter-spacing: 10px;
   
  }
  
 
  .number-item:last-child {
    margin-right: 0;
  }

</style>