VUE3 大屏前端数字滚动 vue3-odometer 组件

1. 安装 npm install vue3-odometer odometer

2.组件中注册

import Vue3Odometer from 'vue3-odometer';
import 'odometer/themes/odometer-theme-default.css';

3.页面中应用

  <!-- 顶部数据展示 -->
    <div class="top_l" v-if="state.simple">
      <div v-for="(item, index) in state.topArr" :key="index" class="l_div">
        <div class="l_img">
          <img :src="item.img" style="width: 100%;height: 100%;" />
        </div>
        <div class="l_text">
          <div style="margin-top: 3px;">
            <span style="
            font-weight: 400;
            font-size: 13px;
            color: #FFFFFF;
            text-align: left;
            font-style: normal;
            text-transform: none;">{{ item.name }}</span>
          </div>
          <div style="margin-top: 7px;margin-left: 5px;">
            <Vue3Odometer class="number-value" :value="item.value" />
          </div>
        </div>
      </div>
    </div>
    ------------------------
    <style>
    .number-value {
                  font-weight: 500;
                  font-size: 20px;
                  color: #00FFFF;
                  text-align: left;
                  font-style: normal;
                  text-transform: none
                }
    </style>