
首页
工单管理
合并请求
里程碑
探索
通知
 创建…
 个人信息和配置
 zhiwei / flats 私有库
关注
4
点赞
0
派生
0
代码
工单
0
合并请求
0
项目
0
版本发布
0
百科
动态
 37 提交
 1 分支
 15 MiB
 分支: master 
flats/src/components/visualizcomponent/NumberGrow.vue
95 行
2.2 KiB
原始文件
永久链接
Blame
文件历史
  
<template>
  <div class="number-grow-warp">
    <span ref="numberGrow" :data-time="time" :class="{ 'number-grow': isShowClass }">{{ value }}</span>
  </div>
</template>

<script>
  export default {
    props: {
      isShowClass: {
        type: Boolean,
        default: true
      },
      time: {
        type: Number,
        default: 2
      },
      value: {
        type: Number,
        default: 0
      }
    },

    methods: {
      numberGrow(ele) {
        let _this = this

        let step = Math.ceil((_this.value * 10) / (_this.time * 1000))
        //   let step = 10
        let current = 0
        let start = 0
        let t = setInterval(() => {
          start += step
          if (start > _this.value) {
            clearInterval(t)
            start = _this.value
            t = null
          }
          if (current === start) {
            return
          }
          current = start
          ele.innerHTML = this.numberPutComma(current)
        }, 10)
      },
      numberPutComma(value) {
        if (value == 0) {
          return 0
        }
        if (value.toString().length >= 13) {
          const moneys = value / 1000000000000
          const realVal = parseFloat(moneys).toFixed(2)
          return realVal + '万亿'
        } else if (value.toString().length >= 9) {
          const moneys = value / 100000000
          const realVal = parseFloat(moneys).toFixed(2)
          return realVal + '亿'
        } else if (value.toString().length >= 5) {
          const moneys = value / 10000
          const realVal = parseFloat(moneys).toFixed(2)
          return realVal + '万'
        }else if (Number(value)) {
          let intPartFormat = value
            .toString()
            .replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
          return intPartFormat
        }
      }
    },
    mounted() {
      this.numberGrow(this.$refs.numberGrow)
    },
    watch: {
      value: {
        deep: true,
        handler(newVal, oldVal) {
          this.numberGrow(this.$refs.numberGrow)
        }
      }
    }
  }
</script>

<style>
  .number-grow-warp {
    transform: translateZ(0);
    display: inline-block;
  }

  .number-grow {
    color: inherit;
    font-size: inherit;
    line-height: 1.2vw;
  }
</style>
Powered by Gitea 当前版本: 1.13.1 页面: 76ms 模板: 10ms 许可证 API 官方网站 Go1.15.6