前言:
目前大多数新的vue项目都采用了vue3去写, 在最近的项目中,需要展示数字滚动的效果,我就想到了之前用多的vue-count-to数字滚动插件,发现这个插件只使用于vue2项目,在vue3项目中并不试用。。。由于自己很懒,又不想再手搓一个,于是又找了一个试用于vue3的插件。
vue3-number-roll-plus
1,安装
npm install vue3-number-roll-plus --save2,使用
<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 |