常用组件包括（第三方及个人封装）

最新推荐文章于 2022-05-01 23:45:00 发布

qq_35246952

最新推荐文章于 2022-05-01 23:45:00 发布

阅读量173

点赞数

分类专栏：开发文章标签： javascript vue.js es6

本文链接：https://blog.csdn.net/qq_35246952/article/details/115716211

版权

开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

常用组件：

数字滚动千分位逗号隔开

<template>
  <div class="vertical-num-scroll">
     <div v-for="(item, index) in numData" :key="index" class="real-time-num">
        <div v-if="!isNaN(item)" class="real-time-num-item" :style="{transform: `translateY(-${item*70}px)`}">
          <div>0</div>
          <div>1</div>
          <div>2</div>
          <div>3</div>
          <div>4</div>
          <div>5</div>
          <div>6</div>
          <div>7</div>
          <div>8</div>
          <div>9</div>
        </div>
        <div class="mark-item" v-else>
          <img src="@/assets/hw-h-report/d-red-icon.png" alt="" v-if="type==='red'">
          <img src="@/assets/hw-h-report/d-yellow-icon.png" alt="" v-if="type==='yellow'">
        </div>
      </div>
      <div class="up-arrow">
        <img :class="[{'up-icon': isUp}]" src="@/assets/hw-h-report/up-red.png" alt="" v-if="type==='red'">
        <img :class="[{'up-icon': isUp}]" src="@/assets/hw-h-report/up-yellow.png" alt="" v-if="type==='yellow'">
      </div>
  </div>
</template>
<script>
export default {
  name: 'scrollNum',
  props: {
    turnoverNum: {
      type: Number,
      default: 0
    },
    type: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      numData: []
    }
  },
  
  watch: {
    turnoverNum: {
      handler (n) {
        this.isUp = true
        this.handerData(n)
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    handerData (num) {
      let newNum = num + ''
      if (newNum.length <= 3) {
        newNum = newNum.slice(0, 3)
      // this.toOrderNum(num) // 递归添加"0"补位
      } else if ( 3 < newNum.length && newNum.length <= 6) {
        // window.console.log(num.length,num.slice(0, num.length - 3), num.slice(num.length - 3, num.length))
        newNum = newNum.slice(0, newNum.length - 3) + ',' + newNum.slice(newNum.length - 3, newNum.length)
      } else if (6 < newNum.length && newNum.length <= 9) {
        newNum = newNum.slice(0, newNum.length - 6) + ',' + newNum.slice(newNum.length - 6, newNum.length - 3) + ',' + newNum.slice(newNum.length - 3, newNum-length)
      } else if (9 < newNum.length && newNum.length <= 12) {
        newNum = newNum.slice(0, newNum.length - 9) + ',' + newNum.slice(newNum.length - 9, newNum.length - 6) + ',' + newNum.slice(newNum.length - 6, newNum.length - 3) + ',' + newNum.slice(newNum.length - 3, newNum-length)
      } else {
        this.$message.warning('数字过大，显示异常，请联系后台人员')
        return
      }
      window.console.log(newNum)
      this.numData = newNum.split('')
    },

    changeNum () {
      this.numData = [1,2,',',3,4,7]
    }
  }
}
</script>
<style lang="less" scoped>
@keyframes upArrow {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0;
    transform: translateY(-100%);
  }
  75% {
    opacity: 0;
    transform: translateY(100%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.vertical-num-scroll {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
  .real-time-num-item{
    // display: inline-block;
    transition: all 1s ease-out;
  }
  .real-time-num {
    display: inline-block;
    width: 31px;
    height: 70px;
    line-height: 90px;
    font-size: 51px;
    // margin-left: 3px;
    //line-height: 98px;
    text-align: center;
    overflow: hidden; // 隐藏内容
    position: relative;
    .mark-item {
      width: 31px;
      position: absolute;
      z-index: 1;
      bottom: -5px;
      right: 0;
      // img {
      //   width: ;
      // }
    }
  }
  .real-time-num{
    div {
      width: 35px;
      height: 70px;
      color: #ffffff;
      font-weight: bold;
      // font-family: Source Han Sans SC;
    } 
  }
  .up-arrow {
    margin-left: 8px;
    img {
      margin: 30px 0 0 4px;
    }
    .up-icon {
      animation: upArrow ease-in-out 1.5s;
      -webkit-animation: upArrow ease-in-out 1.5s; 
      -ms-animation: upArrow ease-in-out 1.5s; 
    }
  }
}
</style>