前言:
目前大多数新的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 |