# @device
@device 指令用于指定设备类型列表，并限制组件只能在标记的(指定的)设备上运行。如果当前运行的设备类型与任何标记的设备都不匹配，那么带有设备标记的组件将不会被解析，并且调用 getComponentByName() 或者 querySelector 将无法检索组件。
# 设备类型
| 名称 | 描述 |
|---|---|
| mobile | mobile devices |
| tablet | tablet devices |
| desktop | desktop |
| touch | touchable screen devices |
| android | android devices |
| iphone | iphones |
| ios | devices with iOS OS |
| ipad | ipad |
# 示例
<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>
{
"iframeOptions": {
"style": "height: 500px"
}
}
@device.invert 示例
<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>
{
"iframeOptions": {
"style": "height: 500px"
}
}