vue 中使用Odometer

最新推荐文章于 2024-08-24 09:45:58 发布

alo_ne

最新推荐文章于 2024-08-24 09:45:58 发布

阅读量1.1k

点赞数

分类专栏： Vue-基础

本文链接：https://blog.csdn.net/alo_ne/article/details/118894604

版权

Vue-基础专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<template>
  <div>
    <IOdometer class="iOdometer" :value="num" format="(ddd).dd" />
  </div>
</template>

<script>
import IOdometer from "vue-odometer";
import "odometer/themes/odometer-theme-default.css";
export default {
  components: {
    IOdometer,
  },
  data() {
    return {
      num: 99.99,
    };
  },
  mounted() {
    const that = this;
    setInterval(function () {
      that.num += 1;
    }, 3000 * 30);
  },
};
</script>

<style lang='scss' scoped >
.iOdometer {
  font-size: 2em;
  margin: 0;
  ::v-deep .odometer-digit {
      display: inline-block;
           width: 28px;
      height: 34px;
      background: linear-gradient(0deg, #0e2f6d, rgba(6, 41, 106, 0));
      border: 1px solid;
      border-image: linear-gradient(
        0deg,
        rgba(0, 182, 255, 0.8),
        rgba(0, 182, 255, 0.8)
      );
      font-family: "DigifaceWide";
      text-align: center;
      color: #fff;
      margin-left: 4px;
      border-radius: 3px;
  }
  ::v-deep .odometer-formatting-mark {
      display: inline-block;
           width: 28px;
      height: 34px;
      background: linear-gradient(0deg, #0e2f6d, rgba(6, 41, 106, 0));
      border: 1px solid;
      border-image: linear-gradient(
        0deg,
        rgba(0, 182, 255, 0.8),
        rgba(0, 182, 255, 0.8)
      );
      font-family: "DigifaceWide";
      text-align: center;
      color: #fff;
      margin-left: 4px;
      border-radius: 3px;
  }

}
</style>