1. 获取相关组件的名称

您可以在浏览器中右键点击该组件，选择 “审查”；然后在对应的 <a>标签中找到 component-name 属性的值。对于容器组件，比如target: 'hometab-group-hand'，您可以在浏览器中右键点击其中一个子组件，选择 “审查”；然后在相关的<div>标签中找到 component-name 属性的值。

侧边栏相关的组件名称汇总如下：

组件名称	描述
sidebar	整体侧边栏的外层容器
sidebar-bookmark-v2	书签面板
sidebar-thumbnail-panel	页面缩略图面板
comment-list-sidebar-panel	注释列表面板
sidebar-layers	图层面板
sidebar-attachment	PDF附件面板
sidebar-field	表单域面板

2. 获取相关组件对象，并在其回调函数中进行事件监听

如果只想要监听整体侧边栏的扩展或收缩事件，只需拿到sidebar组件对象，通过其提供的expand 和collapse事件回调即可满足业务功能的插入。示例代码如下：

pdfui.getComponentByName("sidebar").then(com => {
    com.on('expand', () => {
        console.log("sidebar激活，侧边栏扩展。")
    })
    com.on('collapse', () => {
        console.log("sidebar停用，侧边栏收缩。")
    })
});

如果需要对侧边栏中的具体某个或某几个面板的扩展/收缩事件进行监听，则需拿到对应的组件对象，然后再通过其提供的expand 和collapse事件回调即可满足业务功能的插入。示例代码如下：

pdfui.getComponentByName("sidebar-bookmark-v2").then(com => {
    com.on('active', () => {
        console.log("书签列表panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("书签列表panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-thumbnail-panel").then(com => {
    com.on('active', () => {
        console.log("页面缩略图panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("页面缩略图panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName("comment-list-sidebar-panel").then(com => {
    com.on('active', () => {
        console.log("注释列表panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("注释列表panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-layers").then(com => {
    com.on('active', () => {
        console.log("图层panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("图层panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-attachment").then(com => {
    com.on('active', () => {
        console.log("附件panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("附件panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName("sidebar-field").then(com => {
    com.on('active', () => {
        console.log("表单列表panel激活，侧边栏扩展。")
    })
    com.on('deactive', () => {
        console.log("表单列表panel停用，侧边栏收缩。")
    })
});
pdfui.getComponentByName('diy-sidebar-panel').then(com => {
    com.on('active', () => {
            console.log("自定义侧边栏panel激活，侧边栏扩展。")
        })
        com.on('deactive', () => {
            console.log("自定义侧边栏panel停用，侧边栏收缩。")
        })
})

 更多内容可查阅开发者手册中：“组件”-“基础组件”-“Sidebar组件”章节的内容。

PDF打印时，如何在每张纸上放置多页？

扫描件如何转为可编辑的Word？

如何批量OCR文档？

PDF打印时，如何在每张纸上放置多页？

扫描件如何转为可编辑的Word？

如何批量OCR文档？

PDF文档中如何添加下划线？

如何在PDF中添加超链接？

如何使用PDF把彩色图片转为灰度图？

安装报“无法安装Foxit PDF Editor Printer Driver 内核模式打印驱动程序……”

outlook邮件使用福昕转换的pdf打开提示为文件包

如何关闭受保护视图

使用OCR文本识别提示下载对应语言识别插件

PDF打印时，如何在每张纸上放置多页？

扫描件如何转为可编辑的Word？

如何批量OCR文档？

PDF文档中如何添加下划线？

如何在PDF中添加超链接？

如何使用PDF把彩色图片转为灰度图？

安装报“无法安装Foxit PDF Editor Printer Driver 内核模式打印驱动程序……”

outlook邮件使用福昕转换的pdf打开提示为文件包

如何关闭受保护视图

使用OCR文本识别提示下载对应语言识别插件