text: (window.webpackJsonp=window.webpackJsonp||[]).push([[119],{476:function(t,n,a){"use strict";a.r(n);var s=a(55),e=Object(s.a)({},(function(){var t=this,n=t.$createElement,a=t._self._c||n;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"自定义ui"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#自定义ui"}},[t._v("#")]),t._v(" 自定义UI")]),t._v(" "),a("p",[t._v("从7.0版本开始，Foxit PDF SDK for Web提供了包含功能模块的内置UI框架，该UI框架是通过使用Foxit PDF SDK for Web来实现的，并且封装在UIExtension.js中。此外，自定义UI也非常简单。Foxit PDF SDK for Web为开发人员提供了一组丰富的API，用来自定义web viewer的外观和风格。")]),t._v(" "),a("p",[t._v("UIExtension 的界面由两部分组成："),a("a",{attrs:{href:"#%E4%BD%BF%E7%94%A8template%E8%87%AA%E5%AE%9A%E4%B9%89UI%E5%B8%83%E5%B1%80"}},[t._v("template")]),t._v(" 和 "),a("a",{attrs:{href:"#%E4%BD%BF%E7%94%A8fragments%E8%87%AA%E5%AE%9A%E4%B9%89UI"}},[t._v("fragments")]),t._v('。Template相当于是对HTML的扩展，在模板中的控件需要通过标签来声明。Template用来自定义无需交互的UI布局 (css样式，图标，文本等) 。Fragments是一组UI snippet，用来自定义模板中的控件的配置项和交互逻辑。每一个snippet都有一个操作类型 "aciton"，其用来指定snippet的作用方式 (append, prepend, before, after, ext, replace, insert, 和 remove，默认是 ext)。通过这些作用方式，您可以向template中插入、删除、替换和修改控件。')]),t._v(" "),a("p",[t._v("下面示例中所用到的所有内置控件，请参阅"),a("a",{attrs:{href:"#%E5%86%85%E7%BD%AE%E7%BB%84%E4%BB%B6%E7%AE%80%E4%BB%8B"}},[t._v("内置组件简介")]),t._v("小节.")]),t._v(" "),a("h2",{attrs:{id:"使用template自定义ui布局"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用template自定义ui布局"}},[t._v("#")]),t._v(" 使用template自定义UI布局")]),t._v(" "),a("p",[t._v("Template主要用来自定义控件的UI布局。以下示例将介绍template的使用方法。所有的示例代码都是基于集成章节的 "),a("RouterLink",{attrs:{to:"/zh/main/getting-started/integration.html#集成功能完整的webViewer"}},[t._v("集成功能完整的webViewer")]),t._v(" 小节.")],1),t._v(" "),a("h3",{attrs:{id:"创建一个简单的template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#创建一个简单的template"}},[t._v("#")]),t._v(" 创建一个简单的template")]),t._v(" "),a("p",[t._v("一个最简单的模板，如下所示：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" pdfui "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("PDFUI")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    viewerOptions"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        libPath"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./lib'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the library path of web sdk.")]),t._v("\n        jr"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            licenseSN"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" licenseSN"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            licenseKey"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" licenseKey\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    renderTo"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#pdf-ui'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// the div (id="pdf-ui").')]),t._v("\n    appearance"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("appearances"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Appearance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getLayoutTemplate")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<webpdf>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    <viewer></viewer>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'</webpdf>'")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("ul",[a("li",[a("code",[t._v("<webpdf>")]),t._v(" 标签会监听文档打开和关闭事件，触发"),a("strong",[t._v("Appearance")]),t._v("对象的"),a("strong",[t._v("enableAll")]),t._v("和"),a("strong",[t._v("disableAll")]),t._v("方法来启用/禁用界面上相关的组件。")]),t._v(" "),a("li",[a("code",[t._v("<viewer>")]),t._v(" 标签是用于渲染PDF内容的地方。每个template都必须含有一个"),a("code",[t._v("<viewer>")]),t._v("标签。该标签可以放置在任何位置，请参考后面的示例代码。")])]),t._v(" "),a("p",[t._v("刷新浏览器 ("),a("a",{attrs:{href:"http://127.0.0.1:8080/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://127.0.0.1:8080/index.html"),a("OutboundLink")],1),t._v("), 然后您可以看到一个不带其他UI组件的简单web PDF viewer。")]),t._v(" "),a("h3",{attrs:{id:"添加一个工具栏"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#添加一个工具栏"}},[t._v("#")]),t._v(" 添加一个工具栏")]),t._v(" "),a("p",[t._v("使用"),a("code",[t._v("<toolbar>")]),t._v("标签添加一个新的工具栏按钮。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" pdfui "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("PDFUI")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    viewerOptions"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        libPath"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./lib'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the library path of web sdk.")]),t._v("\n        jr"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            licenseSN"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" licenseSN"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            licenseKey"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" licenseKey\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    renderTo"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#pdf-ui'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// the div (id="pdf-ui").')]),t._v("\n    appearance"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("appearances"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Appearance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getLayoutTemplate")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<webpdf>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    <toolbar>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'        <open-file-dropdown></open-file-dropdown>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    </toolbar>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    <viewer></viewer>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'</webpdf>'")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("刷新浏览器 ("),a("a",{attrs:{href:"http://127.0.0.1:8080/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://127.0.0.1:8080/index.html"),a("OutboundLink")],1),t._v("), 然后您可以看到新加的工具栏按钮。")]),t._v(" "),a("h3",{attrs:{id:"添加一个标签页"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#添加一个标签页"}},[t._v("#")]),t._v(" 添加一个标签页")]),t._v(" "),a("p",[t._v("使用"),a("code",[t._v("<tabs>")]),t._v(" 和 "),a("code",[t._v("<tab>")]),t._v("标签来添加一个新的标签页。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" CustomAppearance "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("appearances"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Appearance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getLayoutTemplate")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<webpdf>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    <toolbar>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'        <gtab group="custom-tabs" text="Home" body="home-tab-body">\'')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'        </gtab>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'        <gtab group="custom-tabs" text="Comment" body="comment-tab-body">\'')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'        </gtab>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    </toolbar>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'   <div class=\"tab-bodies\">'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'       <div name=\"home-tab-body\">'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'            <open-file-dropdown></open-file-dropdown>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'       </div>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'       <div name="comment-tab-body" class="flex-row">\'')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-strikeout-button></create-strikeout-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-underline-button></create-underline-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-squiggly-button></create-squiggly-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-replace-button></create-replace-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-caret-button></create-caret-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-note-button></create-note-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'       </div>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'   </div>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    <viewer></viewer>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'</webpdf>'")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" pdfui "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("PDFUI")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    viewerOptions"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        libPath"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./lib'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the library path of web sdk.")]),t._v("\n        jr"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            licenseSN"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" licenseSN"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            licenseKey"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" licenseKey\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    renderTo"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#pdf-ui'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// the div (id="pdf-ui").')]),t._v("\n    appearance"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" CustomAppearance\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("刷新浏览器 ("),a("a",{attrs:{href:"http://127.0.0.1:8080/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://127.0.0.1:8080/index.html"),a("OutboundLink")],1),t._v("), 然后您可以看到新添加的标签页。")]),t._v(" "),a("h3",{attrs:{id:"添加一个侧边栏"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#添加一个侧边栏"}},[t._v("#")]),t._v(" 添加一个侧边栏")]),t._v(" "),a("p",[t._v("使用"),a("code",[t._v("<sidebar>")]),t._v("标签来添加一个新的侧边栏按钮。")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" CustomAppearance "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("appearances"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Appearance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getLayoutTemplate")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<webpdf>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    <toolbar>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'        <gtab group="custom-tabs" text="Home" body="home-tab-body">\'')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'        </gtab>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'        <gtab group="custom-tabs" text="Comment" body="comment-tab-body">\'')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'        </gtab>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    </toolbar>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'   <div class=\"tab-bodies\">'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'       <div name=\"home-tab-body\">'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'            <open-file-dropdown></open-file-dropdown>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'       </div>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'       <div name="comment-tab-body" class="flex-row">\'')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-strikeout-button></create-strikeout-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-underline-button></create-underline-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-squiggly-button></create-squiggly-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-replace-button></create-replace-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-caret-button></create-caret-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'           <create-note-button></create-note-button>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'       </div>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'   </div>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    <div class=\"flex-row\">'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'        <sidebar>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'            <bookmark-sidebar-panel></bookmark-sidebar-panel>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'        </sidebar>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'        <viewer></viewer>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'    </div>'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'</webpdf>'")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" pdfui "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("PDFUI")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    viewerOptions"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        libPath"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./lib'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the library path of web sdk.")]),t._v("\n        jr"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            licenseSN"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" licenseSN"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            licenseKey"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" licenseKey\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    renderTo"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#pdf-ui'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// the div (id="pdf-ui").')]),t._v("\n    appearance"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" CustomAppearance\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n")])])]),a("p",[t._v("刷新浏览器 ("),a("a",{attrs:{href:"http://127.0.0.1:8080/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://127.0.0.1:8080/index.html"),a("OutboundLink")],1),t._v("), 然后您可以看到新添加的书签侧边栏。")]),t._v(" "),a("h3",{attrs:{id:"内置布局模板"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#内置布局模板"}},[t._v("#")]),t._v(" 内置布局模板")]),t._v(" "),a("p",[t._v("内置布局模板位于 "),a("a",{attrs:{target:"_blank",href:"/examples/UIExtension/layout_templates/built-in-mobile-layout-template.tpl"}},[t._v("layout_templates")]),t._v(" 目录下。桌面端请参考 "),a("a",{attrs:{target:"_blank",href:"/examples/UIExtension/layout_templates/built-in-pc-layout-template.tpl"}},[t._v("built-in-pc-layout-template.tpl")]),t._v(" 文件，移动端请参考 "),a("a",{attrs:{target:"_blank",href:"/examples/UIExtension/layout_templates/built-in-mobile-layout-template.tpl"}},[t._v("built-in-mobile-layout-template.tpl")]),t._v("文件。您可以根据需要直接修改模板来自定义UI。")]),t._v(" "),a("p",[t._v("在 "),a("a",{attrs:{target:"_blank",href:"/examples/UIExtension/custom_appearance"}},[t._v("custom_appearance")]),t._v(' 目录下，Foxit PDF SDK for Web 提供了两个自定义模板示例。 " '),a("strong",[t._v("adaptive-to-the-device.html")]),t._v('" 能自适应设备 (桌面端和移动端) ，" '),a("strong",[t._v("not-adaptive-to-the-device.html")]),t._v('" 不能自适应设备，仅支持桌面端布局。')]),t._v(" "),a("h2",{attrs:{id:"使用fragments自定义ui"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#使用fragments自定义ui"}},[t._v("#")]),t._v(" 使用fragments自定义UI")]),t._v(" "),a("p",[t._v("Fragments是一组UI snippet，用来自定义模板中的控件的配置项和交互逻辑。")]),t._v(" "),a("h3",{attrs:{id:"创建一个下拉菜单"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#创建一个下拉菜单"}},[t._v("#")]),t._v(" 创建一个下拉菜单")]),t._v(" "),a("p",[t._v('下面的示例代码创建一个包含两个drop-down按钮的下拉菜单, 然后将其加入到 "home-tab-group-hand" 组件的子组件列表的末尾。')]),t._v(" "),a("p",[t._v("如何获取目标组件的名称 (只针对widget部件)，您可以在浏览器中右键点击该组件，选择 “审查”， 然后在对应的 "),a("code",[t._v("<a>")]),t._v(' 标签中找到 "component-name" 属性的值。对于容器组件，比如'),a("code",[t._v('target:"home-tab-group-hand"')]),t._v(", 您可以在浏览器中右键点击其中一个子组件，选择 “审查”，然后在相关的"),a("code",[t._v("<div>")]),t._v(' 标签中找到 "component-name" 属性的值。')]),t._v(" "),a("div",{staticClass:"language-javascript extra-class"},[a("pre",{pre:!0,attrs:{class:"language-javascript"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" customModule "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("PDFUI")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("module")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'custom'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncustomModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("controller")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'CustomController'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("mounted")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("info")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'mounted'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("handle")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("selectedFile")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("selectedFile"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("name"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" CustomController "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" customModule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("getControllerClass")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'CustomController'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" CustomAppearance "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("appearances"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("RibbonAppearance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getDefaultFragments")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Add a component to the end of the list of children of a specified target component.")]),t._v("\n            action"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("UIConsts"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT_ACTION")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("APPEND")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Specify the name of the target component that the new components defined in the above template will be appended to. All the target names of fragments are defined in the layout template.")]),t._v("\n            target"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'home-tab-group-hand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Define the properties of the added component, such as icon, text, and css style.")]),t._v("\n            template"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<dropdown icon-class=\"fv__icon-toolbar-stamp\">'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'    <dropdown-button name="show-hello-button" icon-class="fv__icon-toolbar-hand">say hello</dropdown-button>\'')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('\'    <dropdown-button name="select-pdf-file-button" accept=".pdf" file-selector icon-class="fv__icon-toolbar-open">open</dropdown-button>\'')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'</dropdown>'")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("join")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("''")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Define the interaction logic of the added component.")]),t._v("\n            config"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// specify the component in the above template that the configuration will be applied to.")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// For example, the configuration will be applied to the component with the name of "show-hello-button".')]),t._v("\n                target"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'show-hello-button'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("callback")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                    "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hello'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// The configuration will be applied to the component with the name of "select-pdf-file-button" which is defined in the above template of fragments.')]),t._v("\n                target"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'select-pdf-file-button'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Extend Controller, and implement the handle function.")]),t._v("\n                callback"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" CustomController\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" pdfui "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("PDFUI")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    viewerOptions"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        libPath"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'./lib'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// the library path of web sdk.")]),t._v("\n        jr"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            licenseSN"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" licenseSN"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            licenseKey"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" licenseKey\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    renderTo"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'#pdf-ui'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v('// the div (id="pdf-ui").')]),t._v("\n    appearance"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" CustomAppearance\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("刷新浏览器 ("),a("a",{attrs:{href:"http://127.0.0.1:8080/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://127.0.0.1:8080/index.html"),a("OutboundLink")],1),t._v("), 然后您可以看到新添加的下拉菜单，.")]),t._v(" "),a("h3",{attrs:{id:"删除已有工具栏按钮"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#删除已有工具栏按钮"}},[t._v("#")]),t._v(" 删除已有工具栏按钮")]),t._v(" "),a("p",[t._v("通过fragment删除一个工具栏按钮是非常简单的。比如，删除手型工具，您只需要向fragment中添加一个新的对象。添加如下的代码：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    target"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hand-tool'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    action"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("UIConsts"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT_ACTION")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("REMOVE")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("刷新浏览器 ("),a("a",{attrs:{href:"http://127.0.0.1:8080/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://127.0.0.1:8080/index.html"),a("OutboundLink")],1),t._v("), 然后您可以看到手型工具已被移除，如下所示：")]),t._v(" "),a("h3",{attrs:{id:"修改已有工具栏按钮"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#修改已有工具栏按钮"}},[t._v("#")]),t._v(" 修改已有工具栏按钮")]),t._v(" "),a("p",[t._v("通过fragment修改一个工具栏按钮也是非常简单的。类似 "),a("a",{attrs:{href:"#%E5%88%A0%E9%99%A4%E5%B7%B2%E6%9C%89%E5%B7%A5%E5%85%B7%E6%A0%8F%E6%8C%89%E9%92%AE"}},[t._v("删除已有工具栏控件")]),t._v(" 章节，您只需要向fragment中添加一个新的对象。")]),t._v(" "),a("h4",{attrs:{id:"修改按钮的图标"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#修改按钮的图标"}},[t._v("#")]),t._v(" 修改按钮的图标")]),t._v(" "),a("p",[t._v("例如，修改手型工具的图标，只需要添加如下的代码")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    target"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hand-tool'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    config"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        iconCls"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'fv__icon-toolbar-note'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// your custom icon.")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("刷新浏览器 ("),a("a",{attrs:{href:"http://127.0.0.1:8080/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://127.0.0.1:8080/index.html"),a("OutboundLink")],1),t._v("), 然后您可以看到手型工具的图标已被修改.")]),t._v(" "),a("h4",{attrs:{id:"修改按钮的工具提示信息"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#修改按钮的工具提示信息"}},[t._v("#")]),t._v(" 修改按钮的工具提示信息")]),t._v(" "),a("p",[t._v("例如，修改手型工具的工具提示信息，只需要添加如下的代码：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    target"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hand-tool'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    config"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        tooltip"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            title"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'your custom tooltip'")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("p",[t._v("刷新浏览器 ("),a("a",{attrs:{href:"http://127.0.0.1:8080/index.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("http://127.0.0.1:8080/index.html"),a("OutboundLink")],1),t._v("), 然后您可以看到手型工具的工具提示信息已被修改为 “your custom tooltip”。")]),t._v(" "),a("h4",{attrs:{id:"修改按钮的事件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#修改按钮的事件"}},[t._v("#")]),t._v(" 修改按钮的事件")]),t._v(" "),a("p",[t._v("有两种方法用来修改按钮的事件：")]),t._v(" "),a("ol",[a("li",[t._v("覆盖内置的事件。比如：")])]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    target"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hand-tool'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    config"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("callback")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("alert")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'your click event handler'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("ol",{attrs:{start:"2"}},[a("li",[t._v("基于原有内置事件的逻辑基础上，添加自定义行为。可以使用如下的方式进行配置：")])]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    target"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'hand-tool'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    config"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        callback"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("before")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("handleMethodArguments")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("info")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'called before handle callback with arguments: '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" handleMethodArguments"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("after")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token parameter"}},[t._v("value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" handleMethodArguments")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                console"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("info")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'called after handle callback with returning value and arguments: '")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" value"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" handleMethodArguments"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),a("h4",{attrs:{id:"其它示例"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#其它示例"}},[t._v("#")]),t._v(" 其它示例")]),t._v(" "),a("p",[t._v("有关更多示例代码，请参阅  "),a("a",{attrs:{target:"_blank",href:"/examples/UIExtension/fragment_usage"}},[t._v("fragment_usage")]),t._v("  目录下的示例。")]),t._v(" "),a("h2",{attrs:{id:"模块化"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#模块化"}},[t._v("#")]),t._v(" 模块化")]),t._v(" "),a("p",[t._v("为了区分内置组件和用户自定义组件以避免冲突，UIExtension提供了模块化功能，可以将组件分别注册在不同的模块中。然后，在template中声明组件时加上模块名前缀。")]),t._v(" "),a("h3",{attrs:{id:"创建自定义模块"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#创建自定义模块"}},[t._v("#")]),t._v(" 创建自定义模块")]),t._v(" "),a("p",[t._v("如果您需要定义和使用和内置组件同名的自定义组件，您可以首先创建一个自定义模块，然后在该模块中注册自定义组件。")]),t._v(" "),a("p",[t._v('例如，在内置组件中已经存在一个名为"dropdown"的组件，如果您需要定义一个同名的自定义组件，您可以参考以下的示例:')]),t._v(" "),a("p",[t._v('创建一个新的模块"my-widgets"，然后在该模块中注册一个自定义组件：')]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Create a new module. Please note that the second parameter must be an array if you create a new module.")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" module "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("modular"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("module")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'my-widgets'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("UserDefinedDropdownComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("Component")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("apply")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" arguments"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nUserDefinedDropdownComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getName")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n   "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'dropdown'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Declare the tag name of the component. There is already an existing component with the same name of 'dropdown' in the built-in component.")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UserDefinedDropdownComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("constructor "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("Component"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UserDefinedDropdownComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("render")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\nUIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Component")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("prototype"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("call")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n       "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("element"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("innerText "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'User-defined dropdown component'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\nmodule"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerComponent")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("UserDefinedDropdownComponent"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("p",[t._v("然后，内置dropdown组件和自定义dropdown组件可以使用如下的方式进行区别：")]),t._v(" "),a("div",{staticClass:"language-html extra-class"},[a("pre",{pre:!0,attrs:{class:"language-html"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- built-in dropdown --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("dropdown")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("dropdown")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("\x3c!-- user-defined dropdown --\x3e")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("my-widgets:")]),t._v("dropdown")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token tag"}},[a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),a("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("my-widgets:")]),t._v("dropdown")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),a("p",[t._v("例如，使用自定义dropdown组件：")]),t._v(" "),a("div",{staticClass:"language-js extra-class"},[a("pre",{pre:!0,attrs:{class:"language-js"}},[a("code",[a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("var")]),t._v(" pdfui "),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("PDFUI")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// Omit other parameters.")]),t._v("\n    appearance"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("appearances"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("RibbonAppearance"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token function"}},[t._v("extend")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token function-variable function"}},[t._v("getDefautFragments")]),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("function")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("return")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n                action"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" UIExtension"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("UIConsts"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("FRAGMENT_ACTION")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),a("span",{pre:!0,attrs:{class:"token constant"}},[t._v("APPEND")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                target"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'home-tab-group-hand'")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n                template"),a("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v("'<my-widgets:dropdown></my-widgets:dropdown>'")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// use a colon to separate the module name and component name in the template.")]),t._v("\n            "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"内置组件简介"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#内置组件简介"}},[t._v("#")]),t._v(" 内置组件简介")]),t._v(" "),a("p",[t._v("简单来说，定义在template中的一个标签就是一个组件。容器和部件都属于组件中的一种。区别是容器可以容纳子组件，而部件不可以。所有原生的HTML标签都被定义成容器组件，因此可以自由进行嵌套。")]),t._v(" "),a("p",[t._v("Foxit PDF SDK for Web 封装了一组丰富的内置组件以便开发人员可以快速构建一个web viewer，以及根据需要进行自定义。本章将列举和介绍内置组件中的基础组件和业务组件。")]),t._v(" "),a("h3",{attrs:{id:"基础组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#基础组件"}},[t._v("#")]),t._v(" 基础组件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[a("strong",[t._v("类型")])]),t._v(" "),a("th",[a("strong",[t._v("名称")])]),t._v(" "),a("th",[a("strong",[t._v("描述")])])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("toolbar")]),t._v(" "),a("td",[t._v("工具栏组件，相当于一个空的div (带有底部边框)。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("tabs")]),t._v(" "),a("td",[t._v("标签组件，是tab组件的父组件，用来管理标签页。备注：Tab必须作为tabs组件的子组件存在。")])]),t._v(" "),a("tr",[a("td"),t._v(" "),a("td"),t._v(" "),a("td")]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("tab")]),t._v(" "),a("td",[t._v("标签页。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("group-list")]),t._v(" "),a("td",[t._v("分组列表，用来管理group组件。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("group")]),t._v(" "),a("td",[t._v("分组组件，必须作为group-list的子组件存在。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("sidebar")]),t._v(" "),a("td",[t._v("侧边栏，用来管理侧边栏面板。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("sidebar-panel")]),t._v(" "),a("td",[t._v("侧边栏面板，可以指定面板的图标、标题和内容。例如，demo页面中的sidebar-search, 和 sidebar-bookmark。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("layer")]),t._v(" "),a("td",[t._v("浮动框组件，支持灰色背景和模态框，可以用来实现对话框。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("layer-header")]),t._v(" "),a("td",[t._v("用于对话框头部的组件，可以设置标题，并且带有一个关闭按钮。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("layer-toolbar")]),t._v(" "),a("td",[t._v("相当于一个高度1.5em以及自带flex布局的div，通常用于存放按钮等部件。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("layer-view")]),t._v(" "),a("td",[t._v("相当于一个带有fv_ui-layer-panel的div，通常用于存放对话框的内容。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("下拉组件。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("dropdown-item")]),t._v(" "),a("td",[t._v("下拉选项。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("contextmenu")]),t._v(" "),a("td",[t._v("右键菜单组件。其子组件必须是contextmenu-item 和 contextmenu-separator。显示右键菜单组件，您需要调用 "),a("em",[t._v("showAt()")]),t._v(" 方法。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("accordion")]),t._v(" "),a("td",[t._v("手风琴组件。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("accordion-card")]),t._v(" "),a("td",[t._v("手风琴组件的卡片。可以设置带有标题，内容可以被收缩。其必须以accordion的子组件存在。")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("webpdf")]),t._v(" "),a("td",[t._v("默认template的根组件。其会监听pdfviewer对象的文档打开和关闭事件，以及根据文档的状态控制所有组件的禁用/启用。")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("dropdown-button")]),t._v(" "),a("td",[t._v("下拉选项的一种。点击后触发Controller的handle方法以及click事件。如果设置为文件选择器模式，则点击选择文件后触发change事件，同时会将选中的文件对象传给Controller的handle方法。")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("viewer")]),t._v(" "),a("td",[t._v("渲染PDF文件的组件。每个template文件都必须配置一个viewer组件。")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("text")]),t._v(" "),a("td",[t._v("其会被解析成DOM树中的Text节点。Text部件中的内容会被i18next库本地化。")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("按钮组件。支持设置图标和文本。点击后会触发click事件以调用Controller的handle方法。")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("file-selector")]),t._v(" "),a("td",[t._v("文件选择组件，支持设置图标和文本。点击后会打开系统文本选择器，选择文件后会触发change事件，以及调用Controller的handle方法并传入选中的文件对象。")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("数字输入框，可以设置数字范围和步长。默认范围是无限，默认没有步长。设置步长后，如果最小值不等于无穷小的情况下，输入框的值就一定是最小值+步长*整数。")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("右键菜单选项，必须是contextmenu的子组件。其配置和使用方法都与xbutton类似。")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-separator")]),t._v(" "),a("td",[t._v("右键菜单分隔线。没有其他特殊的作用。")])]),t._v(" "),a("tr",[a("td",[t._v("slot")]),t._v(" "),a("td",[t._v("slot")]),t._v(" "),a("td",[t._v('插槽可以用来实现在复杂的容器组件的不同位置插入子组件的需求。备注：如果 "for="slotName", slotName" 不被支持时，会报出"slot does not exist"的错误。在这种情况下，取决于slot的父节点对应的组件如何处理这个值，请参考Component#appendSlot方法。')])]),t._v(" "),a("tr",[a("td"),t._v(" "),a("td"),t._v(" "),a("td")])])]),t._v(" "),a("h3",{attrs:{id:"业务组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#业务组件"}},[t._v("#")]),t._v(" 业务组件")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[a("strong",[t._v("类型")])]),t._v(" "),a("th",[a("strong",[t._v("名称")])]),t._v(" "),a("th",[a("strong",[t._v("继承的组件")])]),t._v(" "),a("th",[a("strong",[t._v("功能解释")])])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("hand-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("手型工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("selection-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("文本/注释选择工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("snapshot-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("截图工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("open-file-dropdown")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("打开文件下拉菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("download-file-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("下载文件按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("goto-prev-page-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("跳转到上一页按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("goto-next-page-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("跳转到下一页按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("goto-page-input")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("页面跳转输入框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("zoom-out-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("缩小页面按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("zoom-in-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("放大页面按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("editable-zoom-dropdown")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("可编辑的缩放下拉菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("zoom-dropdown")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("缩放控制下拉菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("continuous-page-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("连续页模式按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("continuous-facing-page-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("多页连续页模式按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("loupe-tool-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("放大镜(Loupe)工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("marquee-tool-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("Marquee 工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-text-highlight-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("文本高亮工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-strikeout-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("删除线工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-underline-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("下划线工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-squiggly-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("波浪线工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-replace-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("替换文本工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-caret-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("插入(caret)工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-note-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("备注(Note)工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-typewriter-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("打字机(typewriter)工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-callout-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("注释框(Callout)工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-textbox-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("文本框按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-drawings-dropdown")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("图形工具下拉框按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-pencil-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("铅笔工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("eraser-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("橡皮擦工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-area-highlight-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("区域高亮工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-distance-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("距离工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-attachment-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("附件工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-image-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("图片工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-link-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("链接 (link)工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("stamp-dropdown")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("图章工具下拉列表框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("add-image-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("添加图片工具按钮")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("ink-sign-dropdown")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("手写签名工具下拉框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-stamp-dialog")]),t._v(" "),a("td",[t._v("layer")]),t._v(" "),a("td",[t._v("创建图章弹出框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("loupe-tool-dialog")]),t._v(" "),a("td",[t._v("layer")]),t._v(" "),a("td",[t._v("放大镜(Loupe)工具弹出框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("create-ink-sign-dialog")]),t._v(" "),a("td",[t._v("layer")]),t._v(" "),a("td",[t._v("创建手写签名弹出框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("bookmark-sidebar-panel")]),t._v(" "),a("td",[t._v("sidebar-panel")]),t._v(" "),a("td",[t._v("侧边栏书签面板")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("commentlist-sidebar-panel")]),t._v(" "),a("td",[t._v("sidebar-panel")]),t._v(" "),a("td",[t._v("侧边栏注释面板")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("thumbnail-sidebar-panel")]),t._v(" "),a("td",[t._v("sidebar-panel")]),t._v(" "),a("td",[t._v("侧边栏缩略图面板")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("layer-sidebar-panel")]),t._v(" "),a("td",[t._v("sidebar-panel")]),t._v(" "),a("td",[t._v("侧边栏图层面板")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("search-sidebar-panel")]),t._v(" "),a("td",[t._v("sidebar-panel")]),t._v(" "),a("td",[t._v("侧边栏搜索面板")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("attachment-sidebar-panel")]),t._v(" "),a("td",[t._v("sidebar-panel")]),t._v(" "),a("td",[t._v("侧边栏附件面板")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("page-contextmenu")]),t._v(" "),a("td",[t._v("contextmenu")]),t._v(" "),a("td",[t._v("PDF页面的右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("annot-contextmenu")]),t._v(" "),a("td",[t._v("contextmenu")]),t._v(" "),a("td",[t._v("Annotation 默认右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("action-annot-contextmenu")]),t._v(" "),a("td",[t._v("contextmenu")]),t._v(" "),a("td",[t._v("Image 和 link annotation的右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("default-markup-contextmenu")]),t._v(" "),a("td",[t._v("contextmenu")]),t._v(" "),a("td",[t._v("Markup annotation右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("fileattachment-contextmenu")]),t._v(" "),a("td",[t._v("contextmenu")]),t._v(" "),a("td",[t._v("Attachment annotation右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("media-contextmenu")]),t._v(" "),a("td",[t._v("contextmenu")]),t._v(" "),a("td",[t._v("视频/音频 (video/audio) 右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("redact-contextmenu")]),t._v(" "),a("td",[t._v("contextmenu")]),t._v(" "),a("td",[t._v("密文(redaction)右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("textmarkup-contextmenu")]),t._v(" "),a("td",[t._v("contextmenu")]),t._v(" "),a("td",[t._v("Caret/highlight/strikeout/underline/squiggly/typewriter/callout/textbox 右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-annot-actions")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("显示action设置对话框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-apply-all")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("应用所有的密文注释(redaction annotation)")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-apply")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("应用当前的密文注释(redaction annotation)")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-copy-text")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("复制当前annotation的content数据")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-delete-annot")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("删除当前annotation")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-hand-tool")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("切换到hand工具右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-marquee-zoom")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("切换到放大镜(loupe)工具右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-media-download")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("下载当前多媒体数据流右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-place")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("应用当前密文(redaction)到其他页面右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-properties")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("显示当前annotation属性对话框右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-reply")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("回复当前annotation右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-search")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("显示搜索侧边栏右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-select-tool")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("切换到选择工具右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-zoom-actual-size")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("缩放到100%右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-fitpage")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("适合页面(fit page)右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-fitwidth")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("适合宽度(fit width)右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-zoomin")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("放大(zoom in)右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("contextmenu-item-zoomout")]),t._v(" "),a("td",[t._v("contextmenu-item")]),t._v(" "),a("td",[t._v("缩小(zoom out)右键菜单")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("text-sel:text-selection-tooltip")]),t._v(" "),a("td",[t._v("layer")]),t._v(" "),a("td",[t._v("选择文本后显示的浮动框")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("freetext:freetext-tooltip")]),t._v(" "),a("td",[t._v("layer")]),t._v(" "),a("td",[t._v("选中freetext annotation 后显示的浮动框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("comment-list:toggle-commentlist-group-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("收缩/扩展commentlist panel上的comment group组件 (一个PDF页面中的comment属于同一个group)")])])])]),t._v(" "),a("h3",{attrs:{id:"add-on模块的业务组件"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add-on模块的业务组件"}},[t._v("#")]),t._v(" Add-on模块的业务组件")]),t._v(" "),a("p",[t._v("Add-on模块的业务组件仅在您工程集成了add-on相关模块时才有效。")]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[a("strong",[t._v("类型")])]),t._v(" "),a("th",[a("strong",[t._v("模块:名称")])]),t._v(" "),a("th",[a("strong",[t._v("继承组件")])]),t._v(" "),a("th",[a("strong",[t._v("所属Add-on模块")])]),t._v(" "),a("th",[a("strong",[t._v("描述")])])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("print:print-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("print")]),t._v(" "),a("td",[t._v("显示打印对话框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("print:print-dialog")]),t._v(" "),a("td",[t._v("layer")]),t._v(" "),a("td",[t._v("print")]),t._v(" "),a("td",[t._v("打印对话框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("import-form-module:import-form-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("import-form")]),t._v(" "),a("td",[t._v("导入form数据")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("export-form-module:export-form-dropdown")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("export-form")]),t._v(" "),a("td",[t._v("导出form数据")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("fpmodule:file-property-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("file-property")]),t._v(" "),a("td",[t._v("显示当前文档信息")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("fpmodule:file-property-dialog")]),t._v(" "),a("td",[t._v("layer")]),t._v(" "),a("td",[t._v("file-property")]),t._v(" "),a("td",[t._v("文档信息对话框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("multi-media:multi-media-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("multi-media")]),t._v(" "),a("td",[t._v("切换到创建多媒体Annotation工具")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("edit-pageobjects:edit-all-objects-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("path-objects")]),t._v(" "),a("td",[t._v("切换到页面对象(image/path/text)编辑工具")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("edit-pageobjects:page-objects-dropdown")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("path-objects")]),t._v(" "),a("td",[t._v("创建Path对象工具下拉框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("edit-text-object:add-text-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("text-object")]),t._v(" "),a("td",[t._v("文本编辑")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("edit-text-object:text-bold-style-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("text-object")]),t._v(" "),a("td",[t._v("设置粗体字体")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("edit-text-object:text-italic-style-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("text-object")]),t._v(" "),a("td",[t._v("设置斜体字体")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("edit-text-object:font-color-picker")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("text-object")]),t._v(" "),a("td",[t._v("设置文本颜色下拉框")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("edit-text-object:font-style-dropdown")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("text-object")]),t._v(" "),a("td",[t._v("设置文本字体和大小下拉框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("password-protect:password-protect-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("password-protect")]),t._v(" "),a("td",[t._v("打开加密对话框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("password-protect:remove-protect-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("password-protect")]),t._v(" "),a("td",[t._v("移除密码保护")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("redaction:create-redactions-dropdown")]),t._v(" "),a("td",[t._v("dropdown")]),t._v(" "),a("td",[t._v("redaction")]),t._v(" "),a("td",[t._v("密文(redaction)选项下拉框")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("redaction:apply-redactions-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("redaction")]),t._v(" "),a("td",[t._v("应用密文(redaction)")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("redaction:redaction-search-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("redaction")]),t._v(" "),a("td",[t._v("打开左侧搜索面板")])]),t._v(" "),a("tr",[a("td",[t._v("容器")]),t._v(" "),a("td",[t._v("redaction:redaction-page-dialog")]),t._v(" "),a("td",[t._v("layer")]),t._v(" "),a("td",[t._v("redaction")]),t._v(" "),a("td",[t._v("批量标记页面密文对话框。引用redaction Addon时必须在layout-template中添加该控件。")])]),t._v(" "),a("tr",[a("td",[t._v("部件")]),t._v(" "),a("td",[t._v("h-continuous:h-continuous-button")]),t._v(" "),a("td",[t._v("xbutton")]),t._v(" "),a("td",[t._v("h-continuous")]),t._v(" "),a("td",[t._v("切换水平连续页模式")])])])])])}),[],!1,null,null,null);n.default=e.exports}}]);