福昕开发者文档中心

@device ​

@device 指令用于指定设备类型列表，并限制组件只能在标记的(指定的) 设备上运行。如果当前运行的设备类型与任何标记的设备都不匹配，那么带有设备标记的组件将不会被解析，并且调用 getComponentByName() 或者 querySelector 将无法检索组件。

设备类型 ​

名称描述
mobilemobile devices
tablettablet devices
desktopdesktop
touchtouchable screen devices
androidandroid devices
iphoneiphones
iosdevices with iOS OS
ipadipad

示例 ​

html

<html>
<template id="layout-template">
    <webpdf>
        <div>
            <xbutton name="desktop-button" @device="desktop">Works on desktop only</xbutton>
            <xbutton name="mobile-tablet-button" @device="mobile,tablet">Works on mobile and tablet</xbutton>
        </div>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        },
        afterMounted: function (rootComponent) {
            // In addition to the desktop, other devices will return null
            var desktopButton = rootComponent.getComponentByName('desktop-button');
            // in addition to mobile and tablet device, other devices will return null;
            var mobileTabletButton = rootComponent.getComponentByName('mobile-tablet-button');
            console.info(desktopButton, mobileTabletButton);
        }
    });
    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"
  }
}

@device.invert 示例

html

<html>
<template id="layout-template">
    <webpdf>
        <div>
            <xbutton name="desktop-button" @device.invert="desktop">Doesn't work on desktop</xbutton>
            <xbutton name="mobile-tablet-button" @device.invert="mobile,tablet">Doesn't work on mobile and tablet
            </xbutton>
        </div>
        <div class="fv__ui-body">
            <viewer></viewer>
        </div>
    </webpdf>
</template>
</html>
<script>
    var CustomAppearance = UIExtension.appearances.Appearance.extend({
        getLayoutTemplate: function () {
            return document.getElementById('layout-template').innerHTML;
        },
        disableAll: function () {
        },
        afterMounted: function (rootComponent) {
            // In desktop, this will return null
            var desktopButton = rootComponent.getComponentByName('desktop-button');
            // in mobile and tablet device will return null
            var mobileTabletButton = rootComponent.getComponentByName('mobile-tablet-button');
            console.info(desktopButton, mobileTabletButton);
        }
    });
    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"
  }
}