福昕开发者文档中心

组件选择器 ​

UIExtension 提供了一种类似 CSS 选择器的语法，可以快速搜索组件。它通常用来配置 fragments的 target 属性和搜索组件。

语法 ​

选择器名称示例描述
name selector'componentName', 'component_name','component-name', 'component-name1', '1component'组件名称选择器只能包含单字母、数字、下划线或减号字符。
type selector'@div','@dropdown-menu', '@print:print-dialog'组件类型是指在布局模板中定义的标记名称，一个类型选择器以@字符开始，且带单字母、数字、下划线和减号符号。有时包括用冒号字符分隔的组件模块名称。
star selector'*'选择所有组件。
children selector'selector1>selector2'选择所有匹配selector2且父级组件是selector1的组件。
descendants'selector1 selector2'选择所有在selector1中的selector2组件。
attribute selector[attr=value]选择所有属性或者属性名称为attr ，且值为value的组件。
attribute selector[attr^=value]选择所有属性或者属性名称为attr ，且值以value开头的组件。
attribute selector[attr$=value]选择所有属性或者属性名称为attr ，且值以value结尾的组件。
attribute selector[attr*=value]选择所有属性或者属性名称为attr ，且值包含value的组件。
attribute selector[attr!=value]选择所有属性或者属性名称为attr ，且值不等于value的组件。
method selectorselector1::childAt(index)选择匹配selector1组件的所有第i个子组件
method selectorselector1::parent()选择匹配 selector1的组件的父组件
method selectorselector1::allAfter()选择位于匹配selector1的组件之后的所有兄弟组件
method selectorselector1::allBefore()选择位于匹配selector1的组件之前的所有兄弟组件
index-related selectorselector1::eq(index)选择匹配selector1的第 index 个组件，index 从0 开始
index-related selectorselector1::last()选择匹配 selector1 的最后一个组件
index-related selectorselector1::first()选择匹配 selector1 的第一个组件。其等同于selector1:eq(0)。

示例 ​

html

<html>
</html>
<script>
    UIExtension.PDFUI.module('custom', [])
            .controller('customController', {
                handle: function () {
                    const root = this.component.getRoot();
                    const contextmenuItems = root.querySelectorAll('fv--page-contextmenu>@contextmenu-item');
                    contextmenuItems.forEach(function (contextmenu) {
                        contextmenu.element.style.cssText += 'color: red';
                    })
                }
            })
    var CustomRibbonAppearance = UIExtension.appearances.RibbonAppearance.extend({
        getDefaultFragments() {
            // 移除 export comment 下拉菜单。
            return [{
                target: 'home-tab-group-hand::childAt(0)',
                action: 'after',
                template: `<xbutton class="fv__ui-toolbar-show-text-button">Click me!</xbutton>`
            }, {
                target: 'commentlist-export-comment::parent()',
                action: 'remove'
            }];
        }
    });

    var libPath = window.top.location.origin + '/lib';
    var pdfui = new UIExtension.PDFUI({
        viewerOptions: {
            libPath: libPath,
            jr: {
                licenseSN: licenseSN,
                licenseKey: licenseKey
            }
        },
        renderTo: document.body,
        appearance: CustomRibbonAppearance,
        addons: []
    });
</script>
json
{
  "iframeOptions": {
    "style": "height: 500px"
  }
}