vue-scroll-number
一个带有动画顺序控制的数字上下滚动 Vue 2.x 组件
中文文档 | English
Demos
Table of contents
开始
安装
你可以通过 npm
来安装。
npm i vue-scroll-number -S
或者通过 yarn
安装:
yarn add vue-scroll-number
还可以直接使用 CDN
方式引入
先决条件:该方式必须先要引入完整
Vue
,或者在window
对象上暴露出Vue
构造函数。
<!-- 首先要引入 Vue --> <!-- 引入样式 --><!-- 引入 vue-scroll-number -->
用法
基本用法
全局引入或者使用组件引入,在入口文件处:
;; Vue;
组件内使用:
全局配置
可全局配置 ScrollNumber 组件的行为
Vue;
定制样式
vue-scroll-number 使用 SCSS 编写,如果你的项目也使用了 SCSS,那么可以直接在项目中改变内置的样式变量。新建一个如 custom-variables.scss
的文件:
;;; ;;
在入口文件引入。transitionTime
动画渐变时间需要单独(全局或者组件传入)设置:
;; Vue;
动画顺序控制
vue-scroll-number 将自动缓冲每一次变化指令,并用流畅的动画按先后顺序表现出来。
在代码中,每一次改变状态(或者调用方法)都将返回一个 Promise
对象,并保存在组件的 process
属性值上。当返回的 Promise
对象转变成 fulfilled
状态时,当前的动画已经结束。
尝试下面的代码,无论调用多少次
runWithValue
或者runWithApi
方法,动画仍会桉顺序展现。
const scrollNumber = this$refsscrollNumber;...// generate random number { const random = Math > 05 ? val : ''; const num = +...Math * 5 >> 0 + 1 ; return + + + ;} { const series = ...5; console; let index = 0; const run = { const value = seriesindex++; console; thisvalue = value; if index !== serieslength scrollNumberprocess ; }; ;} { const series = ...5; console; series;}
ScrollNumber 组件
value
prop: -
类型: { string | number }
-
默认值:
0
-
说明:
value
为受控属性,组件会根据value
值变化自动触发动画。每次动画进程的Promise
实例将会更新在组件的process
属性上 -
用例:
一般不与
changeTo
方法配合使用,请查阅 method: changeTo
itemStyle
prop: - 类型: { object }
- 默认值:
缺省
- 说明: 自定义每一个滚动数字项的样式
transitionTime
prop: - 类型: { number }
- 默认值:
800
- 说明: 定义动画的渐变时长,可覆盖全局配置。一般只在自定义动画时使用,查阅定制样式
changeTo
method: - 参数: { string | number }
- 返回值:
Promise<string|number>
- 说明: 直接在组件上调用,触发内部状态变更和动画,返回动画进程的
Promise
实例
注意:一般不建议和
value
属性配合使用,因为changeTo
手动触发状态变更而不会更新value
参数,而导致内外状态不一致;若捕捉组件change
的事件来变更value
值,则在特定情况下(在一个动画周期内调用多次)将会导致无限的状态变更和动画循环。
- 用例:
change
event: - 参数: { string | number }
- 说明: 当内部状态变更后且动画已结束,并在
process
的状态fulfilled
前,发出change
事件
ScrollNumberItem 组件
ScrollNumberItem 组件是 ScrollNumber 组件的最小组成单位,负责单个数位上的动画,也可单独使用,但往往需要更多的计算和手动控制。
vue-scroll-number
包中也导出了该组件。
;; Vue;// Vue.component(ScrollNumber.Item.name, ScrollNumber.Item);
direction
prop: - 类型: { 'FORWARD' | 'BACKWARD' }
- 默认值:
缺省
- 说明: 给定数值变化时动画的方向
itemStyle
prop: - 类型: { object }
- 默认值:
缺省
- 说明: 自定义滚动数字项的样式
transitionTime
prop: - 类型: { number }
- 默认值:
800
- 说明: 定义动画的渐变时长,可覆盖全局配置。一般只在自定义动画时使用,查阅定制样式
changeTo
method: - 参数: { string | number }
- 返回值:
Promise<string|number>
- 说明: 直接在组件上调用,触发内部状态变更和动画,返回动画进程的
Promise
实例。动画的方向和传入的direction
参数相关
forwardTo
method: - 参数: { string | number }
- 返回值:
Promise<string|number>
- 说明: 直接在组件上调用,触发内部状态变更和动画,返回动画进程的
Promise
实例。动画将往上变动至给定值
backwardTo
method: - 参数: { string | number }
- 返回值:
Promise<string|number>
- 说明: 直接在组件上调用,触发内部状态变更和动画,返回动画进程的
Promise
实例。动画将往下变动至给定值