福昕开发者文档中心

Number 组件 ​

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

代码示例 ​

html

<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 组件模板 ​

html

<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