vue3项目中数字滚动效果

       前言：

                目前大多数新的vue项目都采用了vue3去写， 在最近的项目中，需要展示数字滚动的效果，我就想到了之前用多的vue-count-to数字滚动插件，发现这个插件只使用于vue2项目，在vue3项目中并不试用。。。由于自己很懒，又不想再手搓一个，于是又找了一个试用于vue3的插件。

vue3-number-roll-plus                

1，安装

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

2，使用

<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>

3，属性

属性	属性含义	类型	默认值
number	传入的数字	Number/String	0
isSemicolon	是否三位分隔	Boolean	false
speed	滚动速度(s)	Number	1
background	背景色	String	#0e68cc

4，事件

事件名	事件	参数
numberChange	数字变化后触发	number
done	数字滚动结束之后触发	number