# # Number 组件

number 组件用于输入数字。其功能包括输入数字范围、步长、显示效果等。

## # 代码示例

    <html>
        <template id="layout-template">
            <webpdf>
                <div class="flex-container">
                    <number @tooltip tooltip-placement="right" tooltip-title="Any non numeric characters will be rejected" min="0"></number>
                    <number @tooltip tooltip-title="min=0,max=100,step=0.1" min="0" max="100" step="0.1"></number>
                    <number @tooltip tooltip-title="use prefix and suffix" min="0" max="100" step="0.1" prefix="about " suffix="%"></number>
                </div>
                <div class="fv__ui-body">
                    <viewer></viewer>
                </div>
            </webpdf>
        </template>
    </html>
    <style>
        .flex-container {
            display: flex;
        }
    </style>
    <script>
        var CustomAppearance = UIExtension.appearances.Appearance.extend({
            getLayoutTemplate: function() {
                return document.getElementById('layout-template').innerHTML;
            },
            disableAll: function(){}
        });
        var libPath = window.top.location.origin + '/lib';
        var pdfui = new UIExtension.PDFUI({
                viewerOptions: {
                    libPath: libPath,
                    jr: {
                        licenseSN: licenseSN,
                        licenseKey: licenseKey
                    }
                },
                renderTo: document.body,
                appearance: CustomAppearance,
                addons: []
        });
    </script>

## # API

### # Number 组件模板

    <number min="0" max="100" step="0.1" prefix="about " suffix="%"></number>

### # 方法

方法 | 描述 | 版本
--- | --- | ---
setValue(value: number) | 设置组件的值并显示。如果该值不在指定的范围和步长中，则会被处理成相近的合法的值。调用此方法不会触发 `change` 事件。 | 7.1.0
getValue(): number | 获取当前值。 | 7.1.0

## # 事件

名称 | 描述 | 示例 | 版本
--- | --- | --- | ---
`change` | 当组件失去输入焦点时， 并且组件的值发生改变时触发。 | `number.on('change', (newValue, oldValue) => void)` | 7.1.0