@egova/flagwind-web/dist/types/components/number-counter/number-counter.d.ts

flagwind web library

/*!
 * This file is part of `components` module.
 *
 * Authors:
 *      jason <jasonsoop@gmail.com>
 *
 * Licensed under the MIT License.
 * Copyright (C) 2010-2017 Flagwind Inc. All rights reserved.
 */
import { Component } from "../../common";
/**
 * 表示一个带过渡特效的数字组件。
 * @class
 * @version 1.0.0
 */
export default class NumberCounter extends Component {
    private _format;
    private _value;
    private _ribbons;
    private _maxValues;
    private _digits;
    private _transitionEndBound;
    /**
     * 渲染容器。
     * @private
     * @property
     * @returns HTMLElement
     */
    private get $inside();
    /**
     * 获取或设置数值。
     * @public
     * @config
     * @default 0
     * @returns number
     */
    /**
     * 获取或设置数值。
     * @public
     * @config
     * @default 0
     * @returns number
     */
    value: number;
    /**
     * 获取或设置用于格式化数值的字符串表达式。
     * @public
     * @config
     * @default "(d).dd"
     * @example (,ddd)    -  12,345,678
     * @example (,ddd).dd -  12,345,678.09
     * @example (.ddd),dd -  12.345.678,09
     * @example ( ddd),dd -  12 345 678,09
     * @example d         -  12345678
     * @returns string
     */
    /**
     * 获取或设置用于格式化数值的字符串表达式。
     * @public
     * @config
     * @default "(d).dd"
     * @example (,ddd)    -  12,345,678
     * @example (,ddd).dd -  12,345,678.09
     * @example (.ddd),dd -  12.345.678,09
     * @example ( ddd),dd -  12 345 678,09
     * @example d         -  12345678
     * @returns string
     */
    format: string;
    /**
     * 获取或设置用于格式化数值的自定义函数。
     * @public
     * @config
     * @returns Function
     */
    /**
     * 获取或设置用于格式化数值的自定义函数。
     * @public
     * @config
     * @returns Function
     */
    formatFunction: (value: number) => string;
    /**
     * 获取或设置动画持续时间。
     * @public
     * @config
     * @default 2000
     * @returns number
     */
    /**
     * 获取或设置动画持续时间。
     * @public
     * @config
     * @default 2000
     * @returns number
     */
    duration: number;
    /**
     * 获取或设置动画类型。
     * @description 取值范围 "slide" 或 "count"
     * @public
     * @config
     * @default "slide"
     * @returns string
     */
    /**
     * 获取或设置动画类型。
     * @description 取值范围 "slide" 或 "count"
     * @public
     * @config
     * @default "slide"
     * @returns string
     */
    animation: string;
    /**
     * 当数值改变时调用。
     * @param  {number} value
     */
    protected onValueChange(value: number): void;
    /**
     * 创建组件时调用的钩子方法。
     * @protected
     * @returns void
     */
    protected mounted(): void;
    /**
     * 绘制组件。
     * @param  {number} value 需要绘制的数值。
     * @returns void
     */
    private draw;
    /**
     * 更新数值。
     * @param  {number} newValue 需要更新的数值。
     * @returns void
     */
    private update;
    /**
     * 播放数值动画。
     * @param  {number} newValue 需要播放动画的数值。
     * @returns void
     */
    private animate;
    /**
     * 播放 "count" 效果动画。
     * @param  {number} newValue 新的数值。
     * @returns void
     */
    private animateCount;
    /**
     * 播放 "slide" 效果动画。
     * @param  {number} newValue 新的数值。
     * @returns void
     */
    private animateSlide;
    /**
     * 绑定 "transitionend" 事件。
     * @returns void
     */
    private bindTransitionEnd;
    /**
     * 获取字符总数。
     * @param  {Array<number>} ...values
     * @returns number
     */
    private getDigitCount;
    /**
     * 获取小数总数。
     * @param  {Array<number>} ...values
     * @returns number
     */
    private getFractionalDigitCount;
    /**
     * 根据字符格式化表达式或函数格式化数值。
     * @param  {number} value
     * @returns void
     */
    private formatDigits;
    /**
     * 插入一个字符至  DOM 节点中。
     * @param  {HTMLElement} digit
     * @param  {HTMLElement} before?
     * @returns void
     */
    private insertDigit;
    /**
     * 添加一个分割字符。
     * @param  {string} chr
     * @param  {HTMLElement} before?
     * @param  {string} extraClasses?
     * @returns void
     */
    private addSpacer;
    /**
     * 添加一个字符。
     * @param  {string} value
     * @param  {boolean=true} repeating
     * @returns void
     */
    private addDigit;
    /**
     * 绘制一个需要显示的字符节点。
     * @private
     * @returns HTMLElement
     */
    private drawDigit;
    /**
     * 重置字符。
     * @returns void
     */
    private resetDigits;
    /**
     * 重置格式化字符串为一个匿名对象。
     * @private
     * @returns void
     */
    private resetFormat;
    /**
     * 清洗需要渲染的数值。
     * @description 如果参数 value 含有小数点，则会根据格式化字符串的小数位进行四舍五入处理。
     * @returns number
     */
    private cleanValue;
    /**
     * 当动画播放完毕时调用。
     * @returns void
     */
    private onComplete;
}