使用countup.js制作数字滚动效果

1、数字定时刷新，显示从0变动到最终数的效果，字体可以下载不同的字体包。

2、先下载 countup.js,

npm install countup.js --S

3、设置了保留两位小数的情况和整数情况。

<template>
    <div class="summary-data">
      <div class="item" v-for="(item, itemIndex) in config" :key="itemIndex">
        <div class="img">
          <img v-if="itemIndex === 0" src="../../../assets/imgs/roomTempCount.png" />
          <img v-if="itemIndex === 1" src="../../../assets/imgs/avgTemp.png" />
          <img v-if="itemIndex === 2" src="../../../assets/imgs/roomTempCount.png" />
        </div>
        <div class="name">{{ item?.name }}</div>
        <div class="data">
          <span class="value" ref="valueRef">{{
            summaryData?.[item?.valueKey] || '--' }}</span>
        </div>
      </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, onUnmounted, ref, watch } from 'vue'
import { CountUp } from 'countup.js'

export default defineComponent({
  components: {
  },
  props: {
    roomData: {
      type: Object,
      default: () => ({})
    },
  },
  setup(props) {
    const valueRef = ref([]);

    const state = reactive({
      config: [
        {
          name: '安装数',
          valueKey: 'roomTempCount',
        }, {
          name: '温度',
          valueKey: 'roomTemp',
        },
        {
          name: '达标',
          valueKey: 'complianceRate',
        },
      ],
      summaryData: {},

      // 数字动效的参数配置
      optionsOne: {
        decimalPlaces: 2, //保留两位小数
        separator: '', // 千分位分隔符符号
      },
      // 保留整数情况
      optionsTwo: {
        decimalPlaces: 0, //整数
        separator: '', // 千分位分隔符符号
      },
    })

    const methods = {
      getData() {
        const obj1 = { roomTempCount: 7962 }
        // props.roomData = {
           complianceRate: "67.19"
           roomTemp: "19.84"
        }

        state.summaryData = { ...obj1, ...props.roomData }
        let option = {};

        state.config.forEach((item, index) => {
          // / 如果是.00的话,去掉.00,取整数
          if (Number(state.summaryData[item.valueKey]).toString().indexOf('.') === -1) {
            option = state.optionsTwo
          } else {
            option = state.optionsOne;
          }

          const countUp = new CountUp(valueRef.value[index], state.summaryData[item.valueKey], option);
          countUp.start();
        })
      },
    };

    const timer = ref(null)

    onUnmounted(() => {
      clearInterval(timer.value);
    })

    onMounted(() => {
      methods.getData();
      timer.value = setInterval(() => {
        methods.getData();
      }, 1000 * 20);
    })
    watch(() => props.roomData, (newVal) => {
      if (newVal) {
        methods.getData();
      }
    }, {
      immediate: true,
    })
    return {
      ...toRefs(state),
      ...methods,
      valueRef,
    }
  }
})
</script>

<style lang="less" scoped>
@font-face {
  font-family: "DIN";
  /*定义字体名*/
  src: url(../../../assets/font/D-DINCondensed-Bold.ttf);
  /*字体包的引入路径*/
}
.summary-data {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;

  .item {
    display: flex;
    flex-direction: column;
    // align-items: flex-end;
    position: relative;
    padding-top: 10px;

    .img {
      // width: 51px;
      // height: 51px;
      // margin-top: 11px;
    }

    .name {
      position: absolute;
      top: 9%;
      width: 140px;
      text-align: center;
      font-size: 16px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      color: #61A9E8;
      line-height: 22px;
    }

    .data {
      flex: 1;
      height: 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 6px;
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, 0%);


      .value {
        font-size: 36px;
        font-family: DIN;
        color: #FFFFFF;
        line-height: 50px;

      }
    }
  }
}
</style>