数据可视化大屏 项目中很多地方都需要数字展示，为了不让页面看起来单调，数字经常需要添加一些滚动的动画效果。这里使用的vue3之前的组件不好用了，所以从新找了一个在vue3环境下可以用的组件。

安装依赖

npm install vue3-number-roll-plus --save

使用

<template>
   <vue-number-roll-plus
      :number="9999"
      background="transparent"
    >
  </vue-number-roll-plus>
</template>

<script>
import VueNumberRollPlus from "vue3-number-roll-plus"
import "vue3-number-roll-plus/main.css"
export default {
  components: {
    VueNumberRollPlus
  }
}
</script>

属性

事件

保留两位小数

vue-number-roll-plus默认不支持小数，所以做了一点调整，让其支持小数的显示。

<template>
  <div class="numcard">
    <vue-number-roll-plus
        :number="number1"
        :speed="1.5"
        :isSemicolon="true"
        v-if="show"
        background="transparent"
    >
    </vue-number-roll-plus>
    <div v-if="isFixed" class="numcard">
      <div class="dot">.</div>
      <vue-number-roll-plus
          :number="number2"
          :speed="1.5"
          :isSemicolon="true"
          v-if="show"
          background="transparent"
      >
      </vue-number-roll-plus>
    </div>
  </div>

</template>

<script>
import VueNumberRollPlus from "vue3-number-roll-plus"
import "vue3-number-roll-plus/main.css"
import WOW from "wow.js";

export default {
  components: {
    VueNumberRollPlus
  },
  props: {
    number: {
      type: Number,
      default() {
        return 0;
      }
    },
    isFixed: {
      type: Boolean,
      default() {
        return false;
      }
    },
  },
  computed: {
    number1: function () {
      console.log(this.number.toFixed(2))
      console.log(123)
      var num = (this.number.toFixed(2)).toString()
      return num.split(".")[0]
    },
    number2: function () {
      console.log(this.number.toFixed(2))
      console.log(123)
      var num = (this.number.toFixed(2)).toString()
      return num.split(".")[1]
    }
  },
  data() {
    return {
      show: false,
    }
  },
  watch: {
    number() {
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    },
  },
  mounted() {
    this.show = false
    this.$nextTick(() => {
      this.show = true
    })
  },
}
</script>
<style lang="scss">
.numcard {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
}
</style>