福昕开发者文档中心

inline-color-picker 组件 ​

inline-color-picker 组件在界面上显示一个矩形框，用户点击矩形框后会显示一个拾色器窗口，用户可以在拾色器窗口中选择自己想要的颜色。

备注: inline-color-picker 当前仅在 "fv--comparison-select-pdf-file-dialog" 对话框中使用。

代码示例 ​

下面示例展示了 inline-color-picker 组件的基本用法:

html

<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list shrink-size="0">
                <group name="home-tab-group-hand">
                    <hand-ribbon-button></hand-ribbon-button>
                    <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                    <download-file-ribbon-button></download-file-ribbon-button>
                    <form-group label="Select color">
                        <inline-color-picker></inline-color-picker>
                    </form-group>
                </group>
            </group-list>
        </toolbar>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>

</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>
json
{
  "iframeOptions": {
    "style": "height: 300px"
  }
}

通过接口设置当前显示的色值：

html

<html>
<template id="layout-template">
    <webpdf>
        <toolbar>
            <group-list shrink-size="0">
                <group name="home-tab-group-hand" @var.grp="$component">
                    <hand-ribbon-button></hand-ribbon-button>
                    <open-file-ribbon-dropdown></open-file-ribbon-dropdown>
                    <download-file-ribbon-button></download-file-ribbon-button>
                    <form-group label="Select color">
                        <inline-color-picker @init="grp.colorPicker=$component"></inline-color-picker>
                    </form-group>
                    <ribbon-button @on.click="grp.colorPicker.setValue(Math.floor(Math.random() * 0xFFFFFF))"
                                   text="设置随机颜色"></ribbon-button>
                </group>
            </group-list>
        </toolbar>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<style>

</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>
json
{
  "iframeOptions": {
    "style": "height: 300px"
  }
}

API ​

inline-color-picker 组件模板 ​

html

<inline-color-picker></inline-color-picker>

方法 ​

方法描述版本
`setValue(color: numberColor)`设置当前色值
getValue(): Color获取当前色值8.5.0

事件 ​

名称描述示例版本
change用户选择颜色时触发inlineColorPicker.on('change', (color) => {})8.5.0