福昕开发者文档中心

Contextmenu 组件 ​

代码示例 ​

html

<html>
<template id="layout-template">
    <webpdf>
        <div class="fv__ui-body">
            <sidebar open>
                <sidebar-panel icon-class="fv__icon-sidebar-comment-list" @controller="custom:CustomController"
                               title="Contextmenu component sample">
                    <text>Right click here to show contextmenu</text>
                </sidebar-panel>
            </sidebar>
            <viewer></viewer>
        </div>
        <template>
            <contextmenu name="fv--custom-contextmenu">
                <contextmenu-item @controller="custom:AlertDialogController">Click to show a alert</contextmenu-item>
                <contextmenu-item>Click to do nothing</contextmenu-item>
                <contextmenu-separator></contextmenu-separator>
                <contextmenu-item icon-class="fv__icon-comment-item-menu-copy">Copy</contextmenu-item>
                <contextmenu-item icon-class="fv__icon-comment-item-menu-delete">Delete</contextmenu-item>
            </contextmenu>
        </template>
    </webpdf>
</template>
</html>
<script>
    UIExtension.PDFUI.module('custom', [])
            .controller('AlertDialogController', {
                handle: function () {
                    this.getPDFUI().alert('Hello World');
                }
            })
            .controller('CustomController', {
                mounted: function () {
                    this.component.active();
                    var element = this.component.getContainerElement();
                    var contextmenu = this.getComponentByName('fv--custom-contextmenu');
                    var rect = element.getBoundingClientRect();
                    contextmenu.showAt(rect.left + rect.width / 2, rect.top + rect.height / 2);
                    element.addEventListener('contextmenu', function (e) {
                        contextmenu.showAt(e.clientX, e.clientY);
                        e.preventDefault();
                    });
                }
            });
    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: 500px"
  }
}

API ​

Contextmenu 组件模板 ​

模板示例:

html

<contextmenu name="fv--custom-contextmenu">
    <contextmenu-item>Click to show a alert</contextmenu-item>
    <contextmenu-item>Click to do nothing</contextmenu-item>
    <contextmenu-separator></contextmenu-separator>
    <contextmenu-item icon-class="fv__icon-comment-item-menu-copy">Copy</contextmenu-item>
    <contextmenu-item icon-class="fv__icon-comment-item-menu-delete">Delete</contextmenu-item>
</contextmenu>

方法 ​

Contextmenu 方法

方法描述版本
showAt(x: number, y: number):void在指定的坐标上显示，其中 x 轴和 y 轴相对于浏览器视口。7.2.0

有关更详细的信息，请参阅 layer 组件 。

Contextmenun 菜单项方法:

有关更详细的信息，请参阅 xbutton 组件 。

事件 ​

Contextmenu 事件和 layer 组件 一样。