mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-04 23:06:31 +08:00
Deploy to GitHub pages
This commit is contained in:
github-actions[bot]
GitHub
commit
5040469595
23
docs/404.html
Normal file
23
docs/404.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/codeBlockServiceMethods.html
Normal file
26
docs/api/editor/codeBlockServiceMethods.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/componentListServiceMethods.html
Normal file
26
docs/api/editor/componentListServiceMethods.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/dataSourceServiceMethods.html
Normal file
26
docs/api/editor/dataSourceServiceMethods.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/editorServiceEvents.html
Normal file
26
docs/api/editor/editorServiceEvents.html
Normal file
File diff suppressed because one or more lines are too long
95
docs/api/editor/editorServiceMethods.html
Normal file
95
docs/api/editor/editorServiceMethods.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/events.html
Normal file
26
docs/api/editor/events.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/eventsServiceMethods.html
Normal file
26
docs/api/editor/eventsServiceMethods.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/historyServiceEvents.html
Normal file
26
docs/api/editor/historyServiceEvents.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/historyServiceMethods.html
Normal file
26
docs/api/editor/historyServiceMethods.html
Normal file
File diff suppressed because one or more lines are too long
414
docs/api/editor/props.html
Normal file
414
docs/api/editor/props.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/propsServiceEvents.html
Normal file
26
docs/api/editor/propsServiceEvents.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/propsServiceMethods.html
Normal file
26
docs/api/editor/propsServiceMethods.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/slots.html
Normal file
26
docs/api/editor/slots.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/storageServiceMethods.html
Normal file
26
docs/api/editor/storageServiceMethods.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/editor/uiServiceMethods.html
Normal file
26
docs/api/editor/uiServiceMethods.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/form/form-dialog-events.html
Normal file
26
docs/api/form/form-dialog-events.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/form/form-dialog-methods.html
Normal file
26
docs/api/form/form-dialog-methods.html
Normal file
File diff suppressed because one or more lines are too long
55
docs/api/form/form-dialog-props.html
Normal file
55
docs/api/form/form-dialog-props.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/form/form-events.html
Normal file
26
docs/api/form/form-events.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/form/form-methods.html
Normal file
26
docs/api/form/form-methods.html
Normal file
File diff suppressed because one or more lines are too long
55
docs/api/form/form-props.html
Normal file
55
docs/api/form/form-props.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/stage/coreEvents.html
Normal file
26
docs/api/stage/coreEvents.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/stage/coreMethods.html
Normal file
26
docs/api/stage/coreMethods.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/table/events.html
Normal file
26
docs/api/table/events.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/table/methods.html
Normal file
26
docs/api/table/methods.html
Normal file
File diff suppressed because one or more lines are too long
26
docs/api/table/props.html
Normal file
26
docs/api/table/props.html
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
import{aw as e,y as t,z as i,b0 as o}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"codeBlockService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/codeBlockServiceMethods.md","filePath":"api/editor/codeBlockServiceMethods.md"}'),r={name:"api/editor/codeBlockServiceMethods.md"};function s(a,l,d,n,u,g){return i(),t("div",null,l[0]||(l[0]=[o("",66)]))}const c=e(r,[["render",s]]);export{h as __pageData,c as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as e,y as i,z as o,b0 as l}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"componentListService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/componentListServiceMethods.md","filePath":"api/editor/componentListServiceMethods.md"}'),s={name:"api/editor/componentListServiceMethods.md"};function r(a,t,n,c,d,p){return o(),i("div",null,t[0]||(t[0]=[l('<h1 id="componentlistservice方法" tabindex="-1">componentListService方法 <a class="header-anchor" href="#componentlistservice方法" aria-label="Permalink to "componentListService方法""></a></h1><h2 id="setlist" tabindex="-1">setList <a class="header-anchor" href="#setlist" aria-label="Permalink to "setList""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><h2 id="getlist" tabindex="-1">getList <a class="header-anchor" href="#getlist" aria-label="Permalink to "getList""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><h2 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to "destroy""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul>',7)]))}const h=e(s,[["render",r]]);export{g as __pageData,h as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as e,y as i,z as o,b0 as l}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"componentListService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/componentListServiceMethods.md","filePath":"api/editor/componentListServiceMethods.md"}'),s={name:"api/editor/componentListServiceMethods.md"};function r(a,t,n,c,d,p){return o(),i("div",null,t[0]||(t[0]=[l("",7)]))}const h=e(s,[["render",r]]);export{g as __pageData,h as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as a,y as t,z as r,b0 as o}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"dataSourceService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/dataSourceServiceMethods.md","filePath":"api/editor/dataSourceServiceMethods.md"}'),d={name:"api/editor/dataSourceServiceMethods.md"};function i(h,e,s,l,n,c){return r(),t("div",null,e[0]||(e[0]=[o('<h1 id="datasourceservice方法" tabindex="-1">dataSourceService方法 <a class="header-anchor" href="#datasourceservice方法" aria-label="Permalink to "dataSourceService方法""></a></h1><h2 id="get" tabindex="-1">get <a class="header-anchor" href="#get" aria-label="Permalink to "get""></a></h2><h2 id="getformconfig" tabindex="-1">getFormConfig <a class="header-anchor" href="#getformconfig" aria-label="Permalink to "getFormConfig""></a></h2><h2 id="setformconfig" tabindex="-1">setFormConfig <a class="header-anchor" href="#setformconfig" aria-label="Permalink to "setFormConfig""></a></h2><h2 id="getformvalue" tabindex="-1">getFormValue <a class="header-anchor" href="#getformvalue" aria-label="Permalink to "getFormValue""></a></h2><h2 id="setformvalue" tabindex="-1">setFormValue <a class="header-anchor" href="#setformvalue" aria-label="Permalink to "setFormValue""></a></h2><h2 id="getformevent" tabindex="-1">getFormEvent <a class="header-anchor" href="#getformevent" aria-label="Permalink to "getFormEvent""></a></h2><h2 id="setformevent" tabindex="-1">setFormEvent <a class="header-anchor" href="#setformevent" aria-label="Permalink to "setFormEvent""></a></h2><h2 id="getformmethod" tabindex="-1">getFormMethod <a class="header-anchor" href="#getformmethod" aria-label="Permalink to "getFormMethod""></a></h2><h2 id="setformmethod" tabindex="-1">setFormMethod <a class="header-anchor" href="#setformmethod" aria-label="Permalink to "setFormMethod""></a></h2><h2 id="add" tabindex="-1">add <a class="header-anchor" href="#add" aria-label="Permalink to "add""></a></h2><h2 id="update" tabindex="-1">update <a class="header-anchor" href="#update" aria-label="Permalink to "update""></a></h2><h2 id="remove" tabindex="-1">remove <a class="header-anchor" href="#remove" aria-label="Permalink to "remove""></a></h2><h2 id="getdatasourcebyid" tabindex="-1">getDataSourceById <a class="header-anchor" href="#getdatasourcebyid" aria-label="Permalink to "getDataSourceById""></a></h2><h2 id="resetstate" tabindex="-1">resetState <a class="header-anchor" href="#resetstate" aria-label="Permalink to "resetState""></a></h2><h2 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to "destroy""></a></h2>',16)]))}const f=a(d,[["render",i]]);export{u as __pageData,f as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as a,y as t,z as r,b0 as o}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"dataSourceService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/dataSourceServiceMethods.md","filePath":"api/editor/dataSourceServiceMethods.md"}'),d={name:"api/editor/dataSourceServiceMethods.md"};function i(h,e,s,l,n,c){return r(),t("div",null,e[0]||(e[0]=[o("",16)]))}const f=a(d,[["render",i]]);export{u as __pageData,f as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as t,y as r,z as a,b0 as o}from"./chunks/framework.BCBheFgR.js";const p=JSON.parse('{"title":"editorService事件","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/editorServiceEvents.md","filePath":"api/editor/editorServiceEvents.md"}'),i={name:"api/editor/editorServiceEvents.md"};function c(d,e,n,s,l,h){return a(),r("div",null,e[0]||(e[0]=[o('<h1 id="editorservice事件" tabindex="-1">editorService事件 <a class="header-anchor" href="#editorservice事件" aria-label="Permalink to "editorService事件""></a></h1><h2 id="root-change" tabindex="-1">root-change <a class="header-anchor" href="#root-change" aria-label="Permalink to "root-change""></a></h2><ul><li><p><strong>详情：</strong> dsl跟节点发生变化，<a href="./editorServiceMethods.html#set">editorService.set('root', {})</a>后触发</p></li><li><p><strong>回调函数：</strong> (value: <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73" target="_blank" rel="noreferrer">MApp</a>, preValue: <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73" target="_blank" rel="noreferrer">MApp</a>) => void</p></li></ul><h2 id="select" tabindex="-1">select <a class="header-anchor" href="#select" aria-label="Permalink to "select""></a></h2><ul><li><p><strong>详情：</strong> 选中组件，<a href="./editorServiceMethods.html#select">editorService.select()</a>后触发</p></li><li><p><strong>回调函数：</strong> (node: <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>) => void</p></li></ul><h2 id="add" tabindex="-1">add <a class="header-anchor" href="#add" aria-label="Permalink to "add""></a></h2><ul><li><p><strong>详情：</strong> 选中组件，<a href="./editorServiceMethods.html#add">editorService.add()</a>后触发</p></li><li><p><strong>回调函数：</strong> (node: <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]) => void</p></li></ul><h2 id="remove" tabindex="-1">remove <a class="header-anchor" href="#remove" aria-label="Permalink to "remove""></a></h2><ul><li><p><strong>详情：</strong> 选中组件，<a href="./editorServiceMethods.html#remove">editorService.remove()</a>后触发</p></li><li><p><strong>回调函数：</strong> (node: <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]) => void</p></li></ul><h2 id="update" tabindex="-1">update <a class="header-anchor" href="#update" aria-label="Permalink to "update""></a></h2><ul><li><p><strong>详情：</strong> 选中组件，<a href="./editorServiceMethods.html#update">editorService.update()</a>后触发</p></li><li><p><strong>回调函数：</strong> (node: <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>[]) => void</p></li></ul><h2 id="history-change" tabindex="-1">history-change <a class="header-anchor" href="#history-change" aria-label="Permalink to "history-change""></a></h2><ul><li><p><strong>详情：</strong> 历史记录改变，<a href="./editorServiceMethods.html#undo">editorService.redo()，editorService.undo()</a>后触发</p></li><li><p><strong>回调函数：</strong> (node: <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99" target="_blank" rel="noreferrer">MNode</a>) => void</p></li></ul>',13)]))}const f=t(i,[["render",c]]);export{p as __pageData,f as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as t,y as r,z as a,b0 as o}from"./chunks/framework.BCBheFgR.js";const p=JSON.parse('{"title":"editorService事件","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/editorServiceEvents.md","filePath":"api/editor/editorServiceEvents.md"}'),i={name:"api/editor/editorServiceEvents.md"};function c(d,e,n,s,l,h){return a(),r("div",null,e[0]||(e[0]=[o("",13)]))}const f=t(i,[["render",c]]);export{p as __pageData,f as default};
|
||||
70
docs/assets/api_editor_editorServiceMethods.md.BkDhL-Jz.js
Normal file
70
docs/assets/api_editor_editorServiceMethods.md.BkDhL-Jz.js
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
import{aw as s,y as a,z as e,b0 as t}from"./chunks/framework.BCBheFgR.js";const k=JSON.parse('{"title":"editorService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/editorServiceMethods.md","filePath":"api/editor/editorServiceMethods.md"}'),l={name:"api/editor/editorServiceMethods.md"};function n(r,i,p,h,o,d){return e(),a("div",null,i[0]||(i[0]=[t("",92)]))}const g=s(l,[["render",n]]);export{k as __pageData,g as default};
|
||||
1
docs/assets/api_editor_events.md.D-n7YlOa.js
Normal file
1
docs/assets/api_editor_events.md.D-n7YlOa.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as t,y as a,z as r,b0 as o}from"./chunks/framework.BCBheFgR.js";const _=JSON.parse('{"title":"Editor组件 events","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/events.md","filePath":"api/editor/events.md"}'),n={name:"api/editor/events.md"};function s(i,e,d,p,l,c){return r(),a("div",null,e[0]||(e[0]=[o('<h1 id="editor组件-events" tabindex="-1">Editor组件 events <a class="header-anchor" href="#editor组件-events" aria-label="Permalink to "Editor组件 events""></a></h1><h2 id="props-panel-mounted" tabindex="-1">props-panel-mounted <a class="header-anchor" href="#props-panel-mounted" aria-label="Permalink to "props-panel-mounted""></a></h2><ul><li><p><strong>详情：</strong> 编辑器右侧组件属性配置加载完毕后触发</p></li><li><p><strong>回调函数：</strong> (formState: <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39" target="_blank" rel="noreferrer">FomState</a>) => void</p></li></ul>',3)]))}const f=t(n,[["render",s]]);export{_ as __pageData,f as default};
|
||||
1
docs/assets/api_editor_events.md.D-n7YlOa.lean.js
Normal file
1
docs/assets/api_editor_events.md.D-n7YlOa.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as t,y as a,z as r,b0 as o}from"./chunks/framework.BCBheFgR.js";const _=JSON.parse('{"title":"Editor组件 events","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/events.md","filePath":"api/editor/events.md"}'),n={name:"api/editor/events.md"};function s(i,e,d,p,l,c){return r(),a("div",null,e[0]||(e[0]=[o("",3)]))}const f=t(n,[["render",s]]);export{_ as __pageData,f as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as t,y as l,z as i,b0 as o}from"./chunks/framework.BCBheFgR.js";const p=JSON.parse('{"title":"eventService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/eventsServiceMethods.md","filePath":"api/editor/eventsServiceMethods.md"}'),r={name:"api/editor/eventsServiceMethods.md"};function s(n,e,a,d,u,g){return i(),l("div",null,e[0]||(e[0]=[o('<h1 id="eventservice方法" tabindex="-1">eventService方法 <a class="header-anchor" href="#eventservice方法" aria-label="Permalink to "eventService方法""></a></h1><h2 id="init" tabindex="-1">init <a class="header-anchor" href="#init" aria-label="Permalink to "init""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><h2 id="setevents" tabindex="-1">setEvents <a class="header-anchor" href="#setevents" aria-label="Permalink to "setEvents""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><h2 id="setevent" tabindex="-1">setEvent <a class="header-anchor" href="#setevent" aria-label="Permalink to "setEvent""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><h2 id="getevent" tabindex="-1">getEvent <a class="header-anchor" href="#getevent" aria-label="Permalink to "getEvent""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><h2 id="setmethods" tabindex="-1">setMethods <a class="header-anchor" href="#setmethods" aria-label="Permalink to "setMethods""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><h2 id="setmethod" tabindex="-1">setMethod <a class="header-anchor" href="#setmethod" aria-label="Permalink to "setMethod""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><h2 id="getmethod" tabindex="-1">getMethod <a class="header-anchor" href="#getmethod" aria-label="Permalink to "getMethod""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><h2 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to "destroy""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li></li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul>',17)]))}const c=t(r,[["render",s]]);export{p as __pageData,c as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as t,y as l,z as i,b0 as o}from"./chunks/framework.BCBheFgR.js";const p=JSON.parse('{"title":"eventService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/eventsServiceMethods.md","filePath":"api/editor/eventsServiceMethods.md"}'),r={name:"api/editor/eventsServiceMethods.md"};function s(n,e,a,d,u,g){return i(),l("div",null,e[0]||(e[0]=[o("",17)]))}const c=t(r,[["render",s]]);export{p as __pageData,c as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as t,y as a,z as r,b0 as o}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"historyService事件","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/historyServiceEvents.md","filePath":"api/editor/historyServiceEvents.md"}'),i={name:"api/editor/historyServiceEvents.md"};function n(s,e,c,l,h,d){return r(),a("div",null,e[0]||(e[0]=[o('<h1 id="historyservice事件" tabindex="-1">historyService事件 <a class="header-anchor" href="#historyservice事件" aria-label="Permalink to "historyService事件""></a></h1><h2 id="page-change" tabindex="-1">page-change <a class="header-anchor" href="#page-change" aria-label="Permalink to "page-change""></a></h2><ul><li><p><strong>详情：</strong> 页面切换</p></li><li><p><strong>回调函数：</strong> (undoRedo: <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/utils/undo-redo.ts" target="_blank" rel="noreferrer">undoRedo</a>) => void</p></li></ul><h2 id="change" tabindex="-1">change <a class="header-anchor" href="#change" aria-label="Permalink to "change""></a></h2><ul><li><p><strong>详情：</strong> 历史记录发生变化</p></li><li><p><strong>回调函数：</strong> (state: <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404" target="_blank" rel="noreferrer">StepValue</a>) => void</p></li></ul>',5)]))}const u=t(i,[["render",n]]);export{g as __pageData,u as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as t,y as a,z as r,b0 as o}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"historyService事件","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/historyServiceEvents.md","filePath":"api/editor/historyServiceEvents.md"}'),i={name:"api/editor/historyServiceEvents.md"};function n(s,e,c,l,h,d){return r(),a("div",null,e[0]||(e[0]=[o("",5)]))}const u=t(i,[["render",n]]);export{g as __pageData,u as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as t,y as r,z as a,b0 as o}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"historyService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/historyServiceMethods.md","filePath":"api/editor/historyServiceMethods.md"}'),l={name:"api/editor/historyServiceMethods.md"};function i(s,e,n,c,p,h){return a(),r("div",null,e[0]||(e[0]=[o('<h1 id="historyservice方法" tabindex="-1">historyService方法 <a class="header-anchor" href="#historyservice方法" aria-label="Permalink to "historyService方法""></a></h1><h2 id="reset" tabindex="-1">reset <a class="header-anchor" href="#reset" aria-label="Permalink to "reset""></a></h2><ul><li><p><strong>详情：</strong></p><p>重置记录</p></li></ul><h2 id="changepage" tabindex="-1">changePage <a class="header-anchor" href="#changepage" aria-label="Permalink to "changePage""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L61" target="_blank" rel="noreferrer">MPage</a>} page</li></ul></li><li><p><strong>详情：</strong></p><p>按页面切换历史堆栈</p></li></ul><h2 id="empty" tabindex="-1">empty <a class="header-anchor" href="#empty" aria-label="Permalink to "empty""></a></h2><ul><li><p><strong>详情：</strong></p><p>重置记录，同<a href="#reset">reset</a></p></li></ul><h2 id="push" tabindex="-1">push <a class="header-anchor" href="#push" aria-label="Permalink to "push""></a></h2><ul><li><p><strong>参数：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404" target="_blank" rel="noreferrer">StepValue</a>} state</li></ul></li><li><p><strong>返回：</strong></p><ul><li>{<a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404" target="_blank" rel="noreferrer">StepValue</a> | null}</li></ul></li><li><p><strong>详情：</strong></p><p>添加一条历史记录</p></li></ul><h2 id="undo" tabindex="-1">undo <a class="header-anchor" href="#undo" aria-label="Permalink to "undo""></a></h2><ul><li><p><strong>返回：</strong></p><ul><li>{Promise<<a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404" target="_blank" rel="noreferrer">StepValue</a> | null>}</li></ul></li><li><p><strong>详情：</strong></p><p>撤销当前操作</p></li></ul><h2 id="redo" tabindex="-1">redo <a class="header-anchor" href="#redo" aria-label="Permalink to "redo""></a></h2><ul><li><p><strong>返回：</strong></p><ul><li>{Promise<<a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404" target="_blank" rel="noreferrer">StepValue</a> | null>}</li></ul></li><li><p><strong>详情：</strong></p><p>恢复到下一步</p></li></ul><h2 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to "destroy""></a></h2><ul><li><p><strong>详情：</strong></p><p>销毁</p></li></ul>',15)]))}const g=t(l,[["render",i]]);export{u as __pageData,g as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as t,y as r,z as a,b0 as o}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"historyService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/historyServiceMethods.md","filePath":"api/editor/historyServiceMethods.md"}'),l={name:"api/editor/historyServiceMethods.md"};function i(s,e,n,c,p,h){return a(),r("div",null,e[0]||(e[0]=[o("",15)]))}const g=t(l,[["render",i]]);export{u as __pageData,g as default};
|
||||
389
docs/assets/api_editor_props.md.C6nXtNoN.js
Normal file
389
docs/assets/api_editor_props.md.C6nXtNoN.js
Normal file
@ -0,0 +1,389 @@
|
||||
import{aw as i,y as a,z as n,b0 as t}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Editor组件 props","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/props.md","filePath":"api/editor/props.md"}'),l={name:"api/editor/props.md"};function p(h,s,k,e,E,r){return n(),a("div",null,s[0]||(s[0]=[t(`<h1 id="editor组件-props" tabindex="-1">Editor组件 props <a class="header-anchor" href="#editor组件-props" aria-label="Permalink to "Editor组件 props""></a></h1><h2 id="modelvalue-v-model" tabindex="-1">modelValue/v-model <a class="header-anchor" href="#modelvalue-v-model" aria-label="Permalink to "modelValue/v-model""></a></h2><ul><li><p><strong>详情：</strong></p><p>页面初始值</p></li><li><p><strong>默认值：</strong> <code>{}</code></p></li><li><p><strong>类型：</strong> <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73" target="_blank" rel="noreferrer">MApp</a>[]</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"dsl"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> dsl</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'app'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'app_1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> items: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'page'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'page_1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> items: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text_1'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'文本'</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="componentgrouplist" tabindex="-1">componentGroupList <a class="header-anchor" href="#componentgrouplist" aria-label="Permalink to "componentGroupList""></a></h2><ul><li><p><strong>详情：</strong></p><p>左侧面板中的组件列表</p></li><li><p><strong>默认值：</strong> <code>[]</code></p></li><li><p><strong>类型：</strong> <a href="https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355" target="_blank" rel="noreferrer">ComponentGroup</a></p></li></ul><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>icon使用的是<a href="https://element-plus.org/zh-CN/component/icon.html" target="_blank" rel="noreferrer">element-plus icon</a></p><p>也可直接使用url，例如</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>url支持相对路径或者绝对路径，例如</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'./icon.png'</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'/icon.png'</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>请注意如果只是文件名的话是不行的，会被认为是css class</p></div><ul><li><strong>示例：</strong></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :component-group-list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"componentGroupList"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref, markRaw } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { FolderOpened, SwitchButton, Tickets } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@element-plus/icons-vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> componentGroupList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'容器'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> items: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">markRaw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(FolderOpened),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'组'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'container'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'基础组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> items: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">markRaw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Tickets),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'文本'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">markRaw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(SwitchButton),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'按钮'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'button'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>此配置仅在<a href="#sidebar">sidebar</a>中配置了'component-list'时有效</p></div><h2 id="datasourcelist" tabindex="-1">datasourceList <a class="header-anchor" href="#datasourcelist" aria-label="Permalink to "datasourceList""></a></h2><ul><li><p><strong>详情：</strong></p><p>左侧数据源面板中可新增的自定义数据源列表</p></li><li><p><strong>默认值：</strong> <code>[]</code></p></li><li><p><strong>类型：</strong> <a href="https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L589" target="_blank" rel="noreferrer">DatasourceTypeOption</a></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :datasource-list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"datasourceTypeList"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> datasourceTypeList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'http'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'Http数据源'</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>系统默认已提供了base,http两种基础数据源，此处配置的使用者新增的数据源</p></div><h2 id="sidebar" tabindex="-1">sidebar <a class="header-anchor" href="#sidebar" aria-label="Permalink to "sidebar""></a></h2><ul><li><p><strong>详情：</strong></p><p>左侧面板，目前只支持type: 'tabs';</p></li><li><p><strong>默认值：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'tabs'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> status</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'component-list'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'layer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'code-block'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li><p><strong>类型：</strong> <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L258-L265" target="_blank" rel="noreferrer">SideBarData</a></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :sidebar</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"sidebar"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref, markRaw } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { List } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@element-plus/icons-vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ModListPanel </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '../components/sidebars/ModListPanel.vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> sidebar</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'tabs'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> status: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'组件'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> items: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'component-list'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'layer'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'component'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">markRaw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(List),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> component: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">markRaw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(ModListPanel),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'模块'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>icon使用的是<a href="https://element-plus.org/zh-CN/component/icon.html" target="_blank" rel="noreferrer">element-plus icon</a></p><p>也可直接使用url，例如</p><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div></div><h2 id="menu" tabindex="-1">menu <a class="header-anchor" href="#menu" aria-label="Permalink to "menu""></a></h2><ul><li><p><strong>详情：</strong></p><p>顶部工具栏</p><p>系统提供了几个常用功能： <code>'/' | 'delete' | 'undo' | 'redo' | 'zoom-in' | 'zoom-out' | 'zoom' | 'guides' | 'rule' | 'scale-to-original' | 'scale-to-fit'</code></p><p>'/': 分隔符</p><p>'delete': 删除按钮</p><p>'undo': 撤销按钮</p><p>'redo': 恢复按钮</p><p>'zoom-in': 放大按钮</p><p>'zoom-out': 缩小按钮</p><p>'zoom': 缩放(zoom-in', 'zoom-out', 'scale-to-original', 'scale-to-fit' 的集合)</p><p>'guides': 显示隐藏参考线</p><p>'rule': 显示隐藏标尺</p><p>'scale-to-original': 缩放到实际大小</p><p>'scale-to-fit': 缩放以适应</p></li><li><p><strong>默认值：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [], </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">center</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [], </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [] }</span></span></code></pre></div><ul><li><p><strong>类型：</strong> <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L235-L242" target="_blank" rel="noreferrer">MenuBarData</a></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"menu"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref, markRaw, toRaw } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ArrowLeft, Coin } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@element-plus/icons-vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> menu</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> left: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'button'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">markRaw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(ArrowLeft),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tooltip: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'返回'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '/'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'.temp'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> center: [</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'delete'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'undo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'redo'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'zoom'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> right: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'button'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'保存'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> icon: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">markRaw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Coin),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> disabled: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: ({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">editorService</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toRaw</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">get</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'root'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">})</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"></</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">script</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">></span></span></code></pre></div><h2 id="layercontentmenu" tabindex="-1">layerContentMenu <a class="header-anchor" href="#layercontentmenu" aria-label="Permalink to "layerContentMenu""></a></h2><ul><li><p><strong>详情：</strong> 扩展已选组件（组件树）右键菜单</p></li><li><p><strong>默认值：</strong> <code>[]</code></p></li><li><p><strong>类型：</strong> (<a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L168-L195" target="_blank" rel="noreferrer">MenuButton</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L197-L210" target="_blank" rel="noreferrer">MenuComponent</a>)[]</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :layer-content-menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"layerContentMenu"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref, toRaw } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Upload } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@element-plus/icons-vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> layerContentMenu</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'button'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toRow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Upload),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'导出'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'export'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="stagecontentmenu" tabindex="-1">stageContentMenu <a class="header-anchor" href="#stagecontentmenu" aria-label="Permalink to "stageContentMenu""></a></h2><ul><li><p><strong>详情：</strong> 扩展stage（画布区域）右键菜单</p></li><li><p><strong>默认值：</strong> <code>[]</code></p></li><li><p><strong>类型：</strong> (<a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L168-L195" target="_blank" rel="noreferrer">MenuButton</a> | <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L197-L210" target="_blank" rel="noreferrer">MenuComponent</a>)[]</p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :stage-content-menu</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"stageContentMenu"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref, toRaw } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { Upload } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> '@element-plus/icons-vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> stageContentMenu</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'button'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> icon</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">toRow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(Upload),</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> text</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'导出'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handler</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'export'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="runtimeurl" tabindex="-1">runtimeUrl <a class="header-anchor" href="#runtimeurl" aria-label="Permalink to "runtimeUrl""></a></h2><ul><li><p><strong>详情：</strong></p><p><a href="./../../guide/runtime.html">runtime</a>的HTML地址</p><p>在编辑器画布中渲染组件是使用iframe实现，runtimeUrl就是配置在iframe上的src属性</p></li><li><p><strong>默认值：</strong> <code>undefined</code></p></li><li><p><strong>类型：</strong> <code>string</code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> runtime-url</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"https://tencent.github.io/tmagic-editor/playground/runtime/vue3/playground/index.html"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="render" tabindex="-1">render <a class="header-anchor" href="#render" aria-label="Permalink to "render""></a></h2><ul><li><p><strong>详情：</strong></p><p>中间工作区域中画布渲染的内容，通常是通过解析<a href="#modelValue">modelValue</a>来渲染出DOM，return的DOM结构需要有一个根节点。</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p><a href="#runtimeurl">runtimeUrl</a>与render有且只需要配置一个</p></div></li><li><p><strong>默认值：</strong> <code>undefined</code></p></li><li><p><strong>类型：</strong> (stage: <a href="./../stage/coreMethods.html">StageCore</a>) => <code>HTMLDivElement</code> | Promise<<code>HTMLDivElement</code>></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :render</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"renderFunction"</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> renderFunction</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> async</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">stage</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">iframe</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> stage.renderer;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">iframe) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">throw</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> new</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Error</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'iframe 未创建'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> iframe.contentDocument.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">createElement</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'div'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="autoscrollintoview" tabindex="-1">autoScrollIntoView <a class="header-anchor" href="#autoscrollintoview" aria-label="Permalink to "autoScrollIntoView""></a></h2><ul><li><p><strong>详情：</strong></p><p>选中组件时，是否自动滚动该组件到可视区域</p></li><li><p><strong>默认值：</strong> <code>undefined</code></p></li><li><p><strong>类型：</strong> <code>boolean</code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :auto-scroll-intoView</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"true"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="propsconfigs" tabindex="-1">propsConfigs <a class="header-anchor" href="#propsconfigs" aria-label="Permalink to "propsConfigs""></a></h2><ul><li><p><strong>详情：</strong></p><p>组件的属性配置<a href="./../../form-config/fields/text.html">表单的dsl</a></p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>该属性最终会设置到<a href="./propsServiceMethods.html">propsService</a>中，所以也可直接调用<a href="./propsServiceMethods.html#setPropsConfigs">propsService.setPropsConfigs()</a>方法来配置</p></div><p>当选中一个组件时，会根据组件的type值从propsConfigs中获取对应的<a href="./../../form-config/fields/text.html">表单的dsl</a>，并在属性面板中渲染出来</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>获取<a href="./../../form-config/fields/text.html">表单的dsl</a>后实际上还会经过<a href="./propsServiceMethods.html#fillConfig">propsService.fillConfig()</a>方法来处理，用于添加公共配置</p></div></li><li><p><strong>默认值：</strong> <code>{}</code></p></li><li></li><li><p><strong>类型：</strong> Record<string, <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L706" target="_blank" rel="noreferrer">FormConfig</a>></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :props-configs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"propsConfigs"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> propsConfigs</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'文本'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'multiple'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'多行文本'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'switch'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'文本'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="propsvalues" tabindex="-1">propsValues <a class="header-anchor" href="#propsvalues" aria-label="Permalink to "propsValues""></a></h2><ul><li><p><strong>详情：</strong></p><p>添加组件时的默认值</p><p>添加组件时，组件节点DSL的生成过程为，先从<a href="#componentgrouplist">componentGroupList</a>中items中item的data得到一个基础配置，然后再通过<a href="./propsServiceMethods.html#getPropsValue">propsService.getPropsValue()</a>方法，获取到propsValues中对应type的默认值，二者合并生成新增节点的DSL配置</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>该属性最终会设置到<a href="./propsServiceMethods.html">propsService</a>中，所以也可直接调用<a href="./propsServiceMethods.html#setPropsValues">propsService.setPropsValues()</a>方法来配置</p></div></li><li><p><strong>默认值：</strong> <code>{}</code></p></li><li><p><strong>类型：</strong> <code>Record<string, Object></code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :props-values</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"propsValues"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> propsValues</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'文本'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 多行文本</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> multiple: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> button: {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'按钮'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="eventmethodlist" tabindex="-1">eventMethodList <a class="header-anchor" href="#eventmethodlist" aria-label="Permalink to "eventMethodList""></a></h2><ul><li><p><strong>详情：</strong></p><p>组件属性配置中事件tab中的事件名与动作的下拉选项列表</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>该属性最终会设置到<a href="./eventsServiceMethods.html">eventsService</a>中，所以也可直接调用<a href="./eventsServiceMethods.html#setEvents">eventsService.setEvents()</a>与<a href="./eventsServiceMethods.html#setMethods">eventsService.setMethods()</a>方法来配置</p></div></li><li><p><strong>默认值：</strong> <code>{}</code></p></li><li><p><strong>类型：</strong> Record<string, { events: <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29" target="_blank" rel="noreferrer">EventOption</a>[]; methods: <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29" target="_blank" rel="noreferrer">EventOption</a>[] }></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :event-method-list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"eventMethodList"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> eventMethodList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> page: {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> methods: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'刷新'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'refresh'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> events: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> label: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'加载'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'load'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="datasourcevalues" tabindex="-1">datasourceValues <a class="header-anchor" href="#datasourcevalues" aria-label="Permalink to "datasourceValues""></a></h2><ul><li><p><strong>详情：</strong></p><p>与 <code>propsValues</code> 类似，新增数据源时的默认值</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>该属性最终会设置到<a href="./dataSourceServiceMethods.html">dataSourceService</a>中，所以也可直接调用<a href="./dataSourceServiceMethods.html#setFormValue">dataSourceService.setFormValue()</a>方法来配置</p></div></li><li><p><strong>默认值：</strong> <code>{}</code></p></li><li><p><strong>类型：</strong> Record<string, Partial<<a href="https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221" target="_blank" rel="noreferrer">DataSourceSchema</a>>></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :datasource-values</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"datasourceValues"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> datasourceValues</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'user-info'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'user-info'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'用户信息'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> description: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'用户信息'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fields: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'string'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'nick'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'昵称'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> defaultValue: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'请登录'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> enable: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="datasourceconfigs" tabindex="-1">datasourceConfigs <a class="header-anchor" href="#datasourceconfigs" aria-label="Permalink to "datasourceConfigs""></a></h2><ul><li><p><strong>详情：</strong></p><p>与 <code>propsConfigs</code> 类似，数据源的属性配置<a href="./../../form-config/fields/text.html">表单的dsl</a></p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>该属性最终会设置到<a href="./dataSourceServiceMethods.html">dataSourceService</a>中，所以也可直接调用<a href="./dataSourceServiceMethods.html#setFormConfig">dataSourceService.setFormConfig()</a>方法来配置</p></div></li><li><p><strong>默认值：</strong> <code>{}</code></p></li><li><p><strong>类型：</strong> Record<string, <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L706" target="_blank" rel="noreferrer">FormConfig</a>></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :datasource-configs</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"datasourceConfigs"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> datasourceConfigs</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'user-info'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'select'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'type'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'类型'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">，</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options: [</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'qq'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'qq'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ]</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ],</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="datasourceeventmethodlist" tabindex="-1">datasourceEventMethodList <a class="header-anchor" href="#datasourceeventmethodlist" aria-label="Permalink to "datasourceEventMethodList""></a></h2><ul><li><p><strong>详情：</strong></p><p>组件属性配置中事件tab中的事件名与动作的下拉选项列表</p></li><li><p><strong>默认值：</strong> <code>{}</code></p></li></ul><h2 id="moveableoptions" tabindex="-1">moveableOptions <a class="header-anchor" href="#moveableoptions" aria-label="Permalink to "moveableOptions""></a></h2><ul><li><p><strong>详情：</strong></p><p>画布中的选中框配置选项，使用的是<a href="https://github.com/daybrush/moveable" target="_blank" rel="noreferrer">moveable</a>第三方库，可以用来控制组件在画布中是否能被拖动等行为</p></li><li><p><strong>默认值：</strong> <code>{}</code></p></li><li><p><strong>类型：</strong> ((config?: <a href="https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/stage/src/types.ts#L97-L109" target="_blank" rel="noreferrer">CustomizeMoveableOptionsCallbackConfig</a>) => MoveableOptions) | <a href="https://daybrush.com/moveable/release/latest/doc/" target="_blank" rel="noreferrer">MoveableOptions</a></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :moveable-options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"moveableOptions"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> moveableOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> ({ </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">targetId</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> options</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {};</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> node</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editorService.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getNodeById</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(id);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">node) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isPage</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> node.type </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">===</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'page'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"> // 页面不允许拖动</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options.draggable </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">isPage;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options.resizable </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">isPage</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> options;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="defaultselected" tabindex="-1">defaultSelected <a class="header-anchor" href="#defaultselected" aria-label="Permalink to "defaultSelected""></a></h2><ul><li><p><strong>详情：</strong></p><p>编辑器初始化后默认选中的组件节点id</p></li><li><p><strong>默认值：</strong> <code>undefined</code></p></li><li><p><strong>类型：</strong> <code>string | number</code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :default-selected</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"defaultSelected"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> defaultSelected</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">''</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 加载dsl后设置默认选中节点</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getDsl</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">().</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">then</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> defaultSelected.value </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'xxx'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="canselect" tabindex="-1">canSelect <a class="header-anchor" href="#canselect" aria-label="Permalink to "canSelect""></a></h2><ul><li><p><strong>详情：</strong></p><p>鼠标在画布点击时，当前坐标下的dom节点是否可以选中，当前坐标下的dom可能不止只有一个，当有多个时会遍历这些节点并调用canSelect方法进行判断，第一个返回true的dom节点将被选中</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>获取坐标下的节点是通过<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementsFromPoint" target="_blank" rel="noreferrer">document.elementsFromPoint</a>方法</p></div></li><li><p><strong>默认值：</strong> <code>(el: HTMLElement) => Boolean(el.id)</code></p></li><li><p><strong>类型：</strong> <code>(el: HTMLElement) => boolean | Promise<boolean></code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :can-select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"canSelect"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">// 只有dom id为纯数字时才可以被选中</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> canSelect</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">el</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> /</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">^</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\\d</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(el.id);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="iscontainer" tabindex="-1">isContainer <a class="header-anchor" href="#iscontainer" aria-label="Permalink to "isContainer""></a></h2><ul><li><p><strong>详情：</strong></p><p>当组件拖动过程中停留在画布上超过 <a href="#containerHighlightDuration">containerHighlightDuration</a> 时长时，识别当前是否有容器</p><p>当停留超过<a href="#containerHighlightDuration">containerHighlightDuration</a> 时长时，会通过停留的坐标获取当前坐标下所有dom节点，然后遍历这些节点并通过isContainer方法判断，第一个返回true的节点将视为容器</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>获取坐标下的节点是通过<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Document/elementsFromPoint" target="_blank" rel="noreferrer">document.elementsFromPoint</a>方法</p></div></li><li><p><strong>默认值：</strong> <code>(el: HTMLElement) => el.classList.contains('magic-ui-container')</code></p></li><li><p><strong>类型：</strong> <code>(el: HTMLDivElement) => boolean | Promise<boolean>;</code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :is-container</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"isContainer"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> canSelect</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">el</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> /</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">^</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">\\d</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">+$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">/</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(el.id);</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> isContainer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">el</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> canSelect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(el) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">&&</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (el.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">contains</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'magic-ui-container'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> el.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">contains</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'magic-ui-pc-container'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> el.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">contains</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'magic-ui-page'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> el.classList.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">contains</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'magic-ui-pop-content'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">));</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="containerhighlightclassname" tabindex="-1">containerHighlightClassName <a class="header-anchor" href="#containerhighlightclassname" aria-label="Permalink to "containerHighlightClassName""></a></h2><ul><li><strong>详情：</strong></li></ul><p>识别到容器后，会给其dom上添加的class</p><ul><li><p><strong>默认值：</strong> <code>'tmagic-stage-container-highlight'</code></p></li><li><p><strong>类型：</strong> <code>string</code></p></li></ul><h2 id="containerhighlightduration" tabindex="-1">containerHighlightDuration <a class="header-anchor" href="#containerhighlightduration" aria-label="Permalink to "containerHighlightDuration""></a></h2><ul><li><strong>详情：</strong></li></ul><p>当组件拖动过程中停留在画布上超过 <a href="#containerHighlightDuration">containerHighlightDuration</a> 时长时，识别当前是否有容器</p><ul><li><p><strong>默认值：</strong> <code>800</code> （单位为ms）</p></li><li><p><strong>类型：</strong> <code>number</code></p></li></ul><h2 id="containerhighlighttype" tabindex="-1">containerHighlightType <a class="header-anchor" href="#containerhighlighttype" aria-label="Permalink to "containerHighlightType""></a></h2><ul><li><strong>详情：</strong></li></ul><p>在画布中，将组件拖入其他容器的方式</p><p>启动方式</p><p>default: 停留在画布上启动识别</p><p>alt: 按住alt键启动识别</p><p>其他值：不启动</p><ul><li><p><strong>默认值：</strong> <code>'default'</code></p></li><li><p><strong>类型：</strong> <code>'default' | 'alt' | ''</code></p></li></ul><h2 id="stagerect" tabindex="-1">stageRect <a class="header-anchor" href="#stagerect" aria-label="Permalink to "stageRect""></a></h2><ul><li><p><strong>详情：</strong></p><p>画布的大小</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>该属性最终会设置到<a href="./uiServiceMethods.html">uiService</a>中，所以也可直接调用<a href="./uiServiceMethods.html#set">uiService.set('stageRect', value)</a>方法来配置</p></div></li><li><p><strong>默认值：</strong></p></li></ul><div class="language-js vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> width</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">375</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">817</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><ul><li><strong>类型：</strong></li></ul><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> StageRect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> width</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> height</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="codeoptions" tabindex="-1">codeOptions <a class="header-anchor" href="#codeoptions" aria-label="Permalink to "codeOptions""></a></h2><ul><li><p><strong>详情：</strong></p><p>编辑器中的代码编辑器配置</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>tmagic-editor中的所有代码编辑器都使用<a href="https://microsoft.github.io/monaco-editor/" target="_blank" rel="noreferrer">monaco-editor</a>，详细配置请前往<a href="https://microsoft.github.io/monaco-editor/" target="_blank" rel="noreferrer">monaco-editor</a>官网查看</p></div></li><li><p><strong>默认值：</strong> \`\`{}</p></li><li><p><strong>类型：</strong> <code>Object</code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :code-options</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"codeOptions"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> codeOptions</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> tabSize: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">2</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fontSize: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">16</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> formatOnPaste: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="updatedragel" tabindex="-1">updateDragEl <a class="header-anchor" href="#updatedragel" aria-label="Permalink to "updateDragEl""></a></h2><ul><li><strong>详情：</strong></li></ul><p>当选中框与组件不贴合时，可以通过此方法进行调整</p><div class="tip custom-block"><p class="custom-block-title">TIP</p><p>由于画布中组件是渲染在iframe中，而选中框是渲染在编辑器中，所以会导致两者的坐标系有差异，为了解决这个问题，在<a href="#canselect">canSelect</a>为true后会在编辑中创建一个位置大小与组件（target）一致的dom（el）</p></div><ul><li><p><strong>类型：</strong> <code>(el: HTMLElement | SVGElement, target: HTMLElement | SVGElement) => void</code></p></li><li><p><strong>默认值：</strong> <code>undefined</code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :update-drag-el</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"updateDragEl"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> updateDragEl</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">el</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">target</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=></span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> node</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> editorStore.pop;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">!</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">node </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">isPop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(node)) {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">left</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> target.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getBoundingClientRect</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">();</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> el.style.transform </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'none'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> el.style.top </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">top</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> el.style.left </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> \`\${</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">left</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">}px\`</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><h2 id="disableddragstart" tabindex="-1">disabledDragStart <a class="header-anchor" href="#disableddragstart" aria-label="Permalink to "disabledDragStart""></a></h2><ul><li><strong>详情：</strong></li></ul><p>禁用组件未选中情况下，按住鼠标直接拖动</p><ul><li><p><strong>类型：</strong> <code>boolean</code></p></li><li><p><strong>默认值：</strong> <code>false</code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :disabled-drag-start</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"true"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="disabledmultiselect" tabindex="-1">disabledMultiSelect <a class="header-anchor" href="#disabledmultiselect" aria-label="Permalink to "disabledMultiSelect""></a></h2><ul><li><strong>详情：</strong></li></ul><p>禁止多选</p><ul><li><p><strong>类型：</strong> <code>boolean</code></p></li><li><p><strong>默认值：</strong> <code>false</code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :disabled-multi-select</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"true"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-editor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div>`,110)]))}const o=i(l,[["render",p]]);export{g as __pageData,o as default};
|
||||
1
docs/assets/api_editor_props.md.C6nXtNoN.lean.js
Normal file
1
docs/assets/api_editor_props.md.C6nXtNoN.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as i,y as a,z as n,b0 as t}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Editor组件 props","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/props.md","filePath":"api/editor/props.md"}'),l={name:"api/editor/props.md"};function p(h,s,k,e,E,r){return n(),a("div",null,s[0]||(s[0]=[t("",110)]))}const o=i(l,[["render",p]]);export{g as __pageData,o as default};
|
||||
1
docs/assets/api_editor_propsServiceEvents.md.Bi16r2I6.js
Normal file
1
docs/assets/api_editor_propsServiceEvents.md.Bi16r2I6.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as r,y as o,z as s,b0 as t}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"propsService事件","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/propsServiceEvents.md","filePath":"api/editor/propsServiceEvents.md"}'),a={name:"api/editor/propsServiceEvents.md"};function p(i,e,n,c,l,d){return s(),o("div",null,e[0]||(e[0]=[t('<h1 id="propsservice事件" tabindex="-1">propsService事件 <a class="header-anchor" href="#propsservice事件" aria-label="Permalink to "propsService事件""></a></h1><h2 id="props-configs-change" tabindex="-1">props-configs-change <a class="header-anchor" href="#props-configs-change" aria-label="Permalink to "props-configs-change""></a></h2><ul><li><p><strong>详情：</strong> <a href="./propsServiceMethods.html#setPropsConfigs">propsService.setPropsConfigs()</a>后触发</p></li><li><p><strong>回调函数：</strong> () => void</p></li></ul>',3)]))}const v=r(a,[["render",p]]);export{h as __pageData,v as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as r,y as o,z as s,b0 as t}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"propsService事件","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/propsServiceEvents.md","filePath":"api/editor/propsServiceEvents.md"}'),a={name:"api/editor/propsServiceEvents.md"};function p(i,e,n,c,l,d){return s(),o("div",null,e[0]||(e[0]=[t("",3)]))}const v=r(a,[["render",p]]);export{h as __pageData,v as default};
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
import{aw as r,y as t,z as l,b0 as a}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"propsService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/propsServiceMethods.md","filePath":"api/editor/propsServiceMethods.md"}'),o={name:"api/editor/propsServiceMethods.md"};function i(s,e,n,p,c,g){return l(),t("div",null,e[0]||(e[0]=[a("",35)]))}const h=r(o,[["render",i]]);export{u as __pageData,h as default};
|
||||
1
docs/assets/api_editor_slots.md.DJc0kZyD.js
Normal file
1
docs/assets/api_editor_slots.md.DJc0kZyD.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/assets/api_editor_slots.md.DJc0kZyD.lean.js
Normal file
1
docs/assets/api_editor_slots.md.DJc0kZyD.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as a,y as r,z as t,b0 as o}from"./chunks/framework.BCBheFgR.js";const b=JSON.parse('{"title":"Editor组件 slots","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/slots.md","filePath":"api/editor/slots.md"}'),l={name:"api/editor/slots.md"};function s(i,e,n,c,p,d){return t(),r("div",null,e[0]||(e[0]=[o("",44)]))}const u=a(l,[["render",s]]);export{b as __pageData,u as default};
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
import{aw as l,y as t,z as i,b0 as r}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"storageService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/storageServiceMethods.md","filePath":"api/editor/storageServiceMethods.md"}'),o={name:"api/editor/storageServiceMethods.md"};function a(s,e,n,g,u,d){return i(),t("div",null,e[0]||(e[0]=[r("",26)]))}const c=l(o,[["render",a]]);export{h as __pageData,c as default};
|
||||
1
docs/assets/api_editor_uiServiceMethods.md.BhNAYUwK.js
Normal file
1
docs/assets/api_editor_uiServiceMethods.md.BhNAYUwK.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as o,y as a,z as i,b0 as l}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"uiService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/uiServiceMethods.md","filePath":"api/editor/uiServiceMethods.md"}'),r={name:"api/editor/uiServiceMethods.md"};function t(s,e,u,n,d,c){return i(),a("div",null,e[0]||(e[0]=[l('<h1 id="uiservice方法" tabindex="-1">uiService方法 <a class="header-anchor" href="#uiservice方法" aria-label="Permalink to "uiService方法""></a></h1><h2 id="zoom" tabindex="-1">zoom <a class="header-anchor" href="#zoom" aria-label="Permalink to "zoom""></a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>参数：</strong></p><ul><li><code>{number}</code> zoom 缩放倍数</li></ul></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<void>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><p>设置缩放倍数，最小为0.1</p><h2 id="calczoom" tabindex="-1">calcZoom <a class="header-anchor" href="#calczoom" aria-label="Permalink to "calcZoom""></a></h2><ul><li><p><strong><a href="./../../guide/editor-expand.html#行为扩展">扩展支持</a>：</strong> 是</p></li><li><p><strong>返回：</strong></p><ul><li><code>{Promise<number>}</code></li></ul></li><li><p><strong>详情：</strong></p></li></ul><p>计算出缩放以适应的倍数</p><h2 id="use" tabindex="-1">use <a class="header-anchor" href="#use" aria-label="Permalink to "use""></a></h2><p>使用中间件的方式扩展方法，上述方法中标记有<code>扩展支持： 是</code>的方法都支持使用use扩展</p><h2 id="useplugin" tabindex="-1">usePlugin <a class="header-anchor" href="#useplugin" aria-label="Permalink to "usePlugin""></a></h2><ul><li><strong>详情：</strong></li></ul><p>相对于<a href="#use">use</a>, usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有<code>扩展支持： 是</code>的方法都支持使用usePlugin扩展</p><p>每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值</p><h2 id="removeallplugins" tabindex="-1">removeAllPlugins <a class="header-anchor" href="#removeallplugins" aria-label="Permalink to "removeAllPlugins""></a></h2><ul><li><strong>详情：</strong></li></ul><p>删掉当前设置的所有扩展</p>',16)]))}const m=o(r,[["render",t]]);export{h as __pageData,m as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as o,y as a,z as i,b0 as l}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"uiService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/uiServiceMethods.md","filePath":"api/editor/uiServiceMethods.md"}'),r={name:"api/editor/uiServiceMethods.md"};function t(s,e,u,n,d,c){return i(),a("div",null,e[0]||(e[0]=[l("",16)]))}const m=o(r,[["render",t]]);export{h as __pageData,m as default};
|
||||
1
docs/assets/api_form_form-dialog-events.md.B1Tvd5mR.js
Normal file
1
docs/assets/api_form_form-dialog-events.md.B1Tvd5mR.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as e,y as o,z as r,b0 as t}from"./chunks/framework.BCBheFgR.js";const c=JSON.parse('{"title":"FormDialog组件 events","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-dialog-events.md","filePath":"api/form/form-dialog-events.md"}'),l={name:"api/form/form-dialog-events.md"};function i(s,a,n,d,g,h){return r(),o("div",null,a[0]||(a[0]=[t('<h1 id="formdialog组件-events" tabindex="-1">FormDialog组件 events <a class="header-anchor" href="#formdialog组件-events" aria-label="Permalink to "FormDialog组件 events""></a></h1><h2 id="close" tabindex="-1">close <a class="header-anchor" href="#close" aria-label="Permalink to "close""></a></h2><ul><li><p><strong>详情：</strong> 弹出关闭</p></li><li><p><strong>回调函数：</strong> () => void</p></li></ul><h2 id="submit" tabindex="-1">submit <a class="header-anchor" href="#submit" aria-label="Permalink to "submit""></a></h2><ul><li><p><strong>详情：</strong> 调用<a href="./form-dialog-methods.html#save">save()</a></p></li><li><p><strong>回调函数：</strong> (values: any) => void</p></li></ul><h2 id="error" tabindex="-1">error <a class="header-anchor" href="#error" aria-label="Permalink to "error""></a></h2><ul><li><p><strong>详情：</strong> 表单校验不同</p></li><li><p><strong>回调函数：</strong> (error: any) => void</p></li></ul><h2 id="change" tabindex="-1">change <a class="header-anchor" href="#change" aria-label="Permalink to "change""></a></h2><ul><li><p><strong>详情：</strong> 表单中任何值发生变化</p></li><li><p><strong>回调函数：</strong> (values: any) => void</p></li></ul>',9)]))}const p=e(l,[["render",i]]);export{c as __pageData,p as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as e,y as o,z as r,b0 as t}from"./chunks/framework.BCBheFgR.js";const c=JSON.parse('{"title":"FormDialog组件 events","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-dialog-events.md","filePath":"api/form/form-dialog-events.md"}'),l={name:"api/form/form-dialog-events.md"};function i(s,a,n,d,g,h){return r(),o("div",null,a[0]||(a[0]=[t("",9)]))}const p=e(l,[["render",i]]);export{c as __pageData,p as default};
|
||||
1
docs/assets/api_form_form-dialog-methods.md.BHbhKE0E.js
Normal file
1
docs/assets/api_form_form-dialog-methods.md.BHbhKE0E.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as o,y as e,z as t,b0 as r}from"./chunks/framework.BCBheFgR.js";const f=JSON.parse('{"title":"FormDialog组件 methods","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-dialog-methods.md","filePath":"api/form/form-dialog-methods.md"}'),l={name:"api/form/form-dialog-methods.md"};function i(s,a,d,n,m,c){return t(),e("div",null,a[0]||(a[0]=[r('<h1 id="formdialog组件-methods" tabindex="-1">FormDialog组件 methods <a class="header-anchor" href="#formdialog组件-methods" aria-label="Permalink to "FormDialog组件 methods""></a></h1><h2 id="cancel" tabindex="-1">cancel <a class="header-anchor" href="#cancel" aria-label="Permalink to "cancel""></a></h2><ul><li><strong>详情：</strong> 关闭弹窗</li></ul><h2 id="save" tabindex="-1">save <a class="header-anchor" href="#save" aria-label="Permalink to "save""></a></h2><ul><li><p><strong>返回：</strong></p><ul><li><code>{Promise<any>}</code></li></ul></li><li><p><strong>详情：</strong> 获取表单的值</p></li></ul>',5)]))}const _=o(l,[["render",i]]);export{f as __pageData,_ as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as o,y as e,z as t,b0 as r}from"./chunks/framework.BCBheFgR.js";const f=JSON.parse('{"title":"FormDialog组件 methods","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-dialog-methods.md","filePath":"api/form/form-dialog-methods.md"}'),l={name:"api/form/form-dialog-methods.md"};function i(s,a,d,n,m,c){return t(),e("div",null,a[0]||(a[0]=[r("",5)]))}const _=o(l,[["render",i]]);export{f as __pageData,_ as default};
|
||||
30
docs/assets/api_form_form-dialog-props.md.DGgPNL4j.js
Normal file
30
docs/assets/api_form_form-dialog-props.md.DGgPNL4j.js
Normal file
@ -0,0 +1,30 @@
|
||||
import{aw as i,y as a,z as l,b0 as n}from"./chunks/framework.BCBheFgR.js";const d=JSON.parse('{"title":"FormDialog组件 props","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-dialog-props.md","filePath":"api/form/form-dialog-props.md"}'),t={name:"api/form/form-dialog-props.md"};function p(h,s,e,k,r,E){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="formdialog组件-props" tabindex="-1">FormDialog组件 props <a class="header-anchor" href="#formdialog组件-props" aria-label="Permalink to "FormDialog组件 props""></a></h1><h2 id="config" tabindex="-1">config <a class="header-anchor" href="#config" aria-label="Permalink to "config""></a></h2><ul><li><p><strong>详情：</strong> 表单配置</p></li><li><p><strong>默认值：</strong> <code>[]</code></p></li><li><p><strong>类型：</strong> <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706" target="_blank" rel="noreferrer">FormConfig</a></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form-dialog</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"config"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form-dialog</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'文本'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'multiple'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'多行文本'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'switch'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="values" tabindex="-1">values <a class="header-anchor" href="#values" aria-label="Permalink to "values""></a></h2><ul><li><p><strong>详情：</strong> 表单初始化值</p></li><li><p><strong>默认值：</strong> <code>{}</code></p></li><li><p><strong>类型：</strong> <code>Object</code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form-dialog</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :values</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"values"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form-dialog</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> values</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> multiply: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="width" tabindex="-1">width <a class="header-anchor" href="#width" aria-label="Permalink to "width""></a></h2><ul><li><p><strong>详情：</strong> 弹窗宽度</p></li><li><p><strong>类型：</strong> <code>string | number</code></p></li></ul><h2 id="labelwidth" tabindex="-1">labelWidth <a class="header-anchor" href="#labelwidth" aria-label="Permalink to "labelWidth""></a></h2><ul><li><strong>详情：</strong></li></ul><p>表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto</p><ul><li><p><strong>默认值：</strong> <code>'200px'</code></p></li><li><p><strong>类型：</strong> <code>string | number</code></p></li></ul><h2 id="fullscreen" tabindex="-1">fullscreen <a class="header-anchor" href="#fullscreen" aria-label="Permalink to "fullscreen""></a></h2><ul><li><p><strong>详情：</strong> 弹出是否全屏</p></li><li><p><strong>默认值：</strong> false</p></li><li><p><strong>类型：</strong> boolean</p></li></ul><h2 id="disabled" tabindex="-1">disabled <a class="header-anchor" href="#disabled" aria-label="Permalink to "disabled""></a></h2><ul><li><p><strong>详情：</strong> 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效</p></li><li><p><strong>默认值：</strong> false</p></li><li><p><strong>类型：</strong> <code>boolean</code></p></li></ul><h2 id="title" tabindex="-1">title <a class="header-anchor" href="#title" aria-label="Permalink to "title""></a></h2><ul><li><p><strong>详情：</strong> 弹出标题</p></li><li><p><strong>类型：</strong> <code>string</code></p></li></ul><h2 id="size" tabindex="-1">size <a class="header-anchor" href="#size" aria-label="Permalink to "size""></a></h2><ul><li><p><strong>详情：</strong> 用于控制该表单内组件的尺寸</p></li><li><p><strong>类型：</strong> <code>'small' | 'default' | 'large'</code></p></li></ul><h2 id="confirmtext" tabindex="-1">confirmText <a class="header-anchor" href="#confirmtext" aria-label="Permalink to "confirmText""></a></h2><ul><li><p><strong>详情：</strong> 提交按钮文案</p></li><li><p><strong>默认值：</strong> <code>'确定'</code></p></li><li><p><strong>类型：</strong> <code>string</code></p></li></ul>`,23)]))}const g=i(t,[["render",p]]);export{d as __pageData,g as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as i,y as a,z as l,b0 as n}from"./chunks/framework.BCBheFgR.js";const d=JSON.parse('{"title":"FormDialog组件 props","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-dialog-props.md","filePath":"api/form/form-dialog-props.md"}'),t={name:"api/form/form-dialog-props.md"};function p(h,s,e,k,r,E){return l(),a("div",null,s[0]||(s[0]=[n("",23)]))}const g=i(t,[["render",p]]);export{d as __pageData,g as default};
|
||||
1
docs/assets/api_form_form-events.md.DjtkQ04g.js
Normal file
1
docs/assets/api_form_form-events.md.DjtkQ04g.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as r,y as t,z as o,A as e,L as a}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"Form组件 events","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-events.md","filePath":"api/form/form-events.md"}'),l={name:"api/form/form-events.md"};function s(i,n,m,c,d,f){return o(),t("div",null,n[0]||(n[0]=[e("h1",{id:"form组件-events",tabindex:"-1"},[a("Form组件 events "),e("a",{class:"header-anchor",href:"#form组件-events","aria-label":'Permalink to "Form组件 events"'},"")],-1),e("h2",{id:"change",tabindex:"-1"},[a("change "),e("a",{class:"header-anchor",href:"#change","aria-label":'Permalink to "change"'},"")],-1),e("ul",null,[e("li",null,[e("p",null,[e("strong",null,"详情："),a(" 表单中任何值发生变化")])]),e("li",null,[e("p",null,[e("strong",null,"回调函数："),a(" (values: any) => void")])])],-1)]))}const u=r(l,[["render",s]]);export{h as __pageData,u as default};
|
||||
1
docs/assets/api_form_form-events.md.DjtkQ04g.lean.js
Normal file
1
docs/assets/api_form_form-events.md.DjtkQ04g.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as r,y as t,z as o,A as e,L as a}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"Form组件 events","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-events.md","filePath":"api/form/form-events.md"}'),l={name:"api/form/form-events.md"};function s(i,n,m,c,d,f){return o(),t("div",null,n[0]||(n[0]=[e("h1",{id:"form组件-events",tabindex:"-1"},[a("Form组件 events "),e("a",{class:"header-anchor",href:"#form组件-events","aria-label":'Permalink to "Form组件 events"'},"")],-1),e("h2",{id:"change",tabindex:"-1"},[a("change "),e("a",{class:"header-anchor",href:"#change","aria-label":'Permalink to "change"'},"")],-1),e("ul",null,[e("li",null,[e("p",null,[e("strong",null,"详情："),a(" 表单中任何值发生变化")])]),e("li",null,[e("p",null,[e("strong",null,"回调函数："),a(" (values: any) => void")])])],-1)]))}const u=r(l,[["render",s]]);export{h as __pageData,u as default};
|
||||
1
docs/assets/api_form_form-methods.md.D8KfiSNh.js
Normal file
1
docs/assets/api_form_form-methods.md.D8KfiSNh.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as e,y as r,z as t,b0 as a}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"Form组件 methods","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-methods.md","filePath":"api/form/form-methods.md"}'),s={name:"api/form/form-methods.md"};function m(i,o,l,n,d,h){return t(),r("div",null,o[0]||(o[0]=[a('<h1 id="form组件-methods" tabindex="-1">Form组件 methods <a class="header-anchor" href="#form组件-methods" aria-label="Permalink to "Form组件 methods""></a></h1><h2 id="resetform" tabindex="-1">resetForm <a class="header-anchor" href="#resetform" aria-label="Permalink to "resetForm""></a></h2><ul><li><strong>详情：</strong> 重置该表单项，将其值重置为初始值，并移除校验结果</li></ul><h2 id="submitform" tabindex="-1">submitForm <a class="header-anchor" href="#submitform" aria-label="Permalink to "submitForm""></a></h2><ul><li><p><strong>返回：</strong></p><ul><li><code>{Promise<any>}</code></li></ul></li><li><p><strong>详情：</strong> 提交表单，获取表单的值</p></li></ul>',5)]))}const c=e(s,[["render",m]]);export{u as __pageData,c as default};
|
||||
1
docs/assets/api_form_form-methods.md.D8KfiSNh.lean.js
Normal file
1
docs/assets/api_form_form-methods.md.D8KfiSNh.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as e,y as r,z as t,b0 as a}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"Form组件 methods","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-methods.md","filePath":"api/form/form-methods.md"}'),s={name:"api/form/form-methods.md"};function m(i,o,l,n,d,h){return t(),r("div",null,o[0]||(o[0]=[a("",5)]))}const c=e(s,[["render",m]]);export{u as __pageData,c as default};
|
||||
30
docs/assets/api_form_form-props.md.BuujGPjG.js
Normal file
30
docs/assets/api_form_form-props.md.BuujGPjG.js
Normal file
@ -0,0 +1,30 @@
|
||||
import{aw as i,y as a,z as l,b0 as n}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Form组件属性 props","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-props.md","filePath":"api/form/form-props.md"}'),t={name:"api/form/form-props.md"};function p(e,s,h,r,k,o){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="form组件属性-props" tabindex="-1">Form组件属性 props <a class="header-anchor" href="#form组件属性-props" aria-label="Permalink to "Form组件属性 props""></a></h1><h2 id="config" tabindex="-1">config <a class="header-anchor" href="#config" aria-label="Permalink to "config""></a></h2><ul><li><p><strong>详情：</strong> 表单配置</p></li><li><p><strong>默认值：</strong> <code>[]</code></p></li><li><p><strong>类型：</strong> <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706" target="_blank" rel="noreferrer">FormConfig</a></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form-dialog</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"config"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form-dialog</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'文本'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'multiple'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'多行文本'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'switch'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="initvalues" tabindex="-1">initValues <a class="header-anchor" href="#initvalues" aria-label="Permalink to "initValues""></a></h2><ul><li><p><strong>详情：</strong> 表单初始化值</p></li><li><p><strong>默认值：</strong> <code>{}</code></p></li><li><p><strong>类型：</strong> <code>Object</code></p></li><li><p><strong>示例：</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> <</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form-dialog</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :init-values</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"initValues"</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form-dialog</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"><</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'Vue'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> initValues</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">'text'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> multiply: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"></</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">></span></span></code></pre></div><h2 id="labelwidth" tabindex="-1">labelWidth <a class="header-anchor" href="#labelwidth" aria-label="Permalink to "labelWidth""></a></h2><ul><li><strong>详情：</strong></li></ul><p>表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto</p><ul><li><p><strong>默认值：</strong> <code>'200px'</code></p></li><li><p><strong>类型：</strong> <code>string | number</code></p></li></ul><h2 id="disabled" tabindex="-1">disabled <a class="header-anchor" href="#disabled" aria-label="Permalink to "disabled""></a></h2><ul><li><p><strong>详情：</strong> 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效</p></li><li><p><strong>默认值：</strong> false</p></li><li><p><strong>类型：</strong> <code>boolean</code></p></li></ul><h2 id="height" tabindex="-1">height <a class="header-anchor" href="#height" aria-label="Permalink to "height""></a></h2><ul><li><p><strong>详情：</strong></p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="stepactive" tabindex="-1">stepActive <a class="header-anchor" href="#stepactive" aria-label="Permalink to "stepActive""></a></h2><ul><li><p><strong>详情：</strong></p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="size" tabindex="-1">size <a class="header-anchor" href="#size" aria-label="Permalink to "size""></a></h2><ul><li><p><strong>详情：</strong> 用于控制该表单内组件的尺寸</p></li><li><p><strong>类型：</strong> <code>'small' | 'default' | 'large'</code></p></li></ul><h2 id="inline" tabindex="-1">inline <a class="header-anchor" href="#inline" aria-label="Permalink to "inline""></a></h2><ul><li><p><strong>详情：</strong> 行内表单模式</p></li><li><p><strong>默认值：</strong> false</p></li><li><p><strong>类型：</strong> <code>boolean</code></p></li></ul><h2 id="labelposition" tabindex="-1">labelPosition <a class="header-anchor" href="#labelposition" aria-label="Permalink to "labelPosition""></a></h2><ul><li><p><strong>详情：</strong> 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性</p></li><li><p><strong>默认值：</strong> ’right'</p></li><li><p><strong>类型：</strong> <code>'left' | 'right' | 'top</code></p></li></ul><h2 id="keyprop" tabindex="-1">keyProp <a class="header-anchor" href="#keyprop" aria-label="Permalink to "keyProp""></a></h2><ul><li><p><strong>详情：</strong> 作为表单项的组件实例的key</p></li><li><p><strong>默认值：</strong> <code>'__key'</code></p></li><li><p><strong>类型：</strong> <code>string</code></p></li></ul><h2 id="popperclass" tabindex="-1">popperClass <a class="header-anchor" href="#popperclass" aria-label="Permalink to "popperClass""></a></h2><ul><li><p><strong>详情：</strong> tooltip弹出层的class</p></li><li><p><strong>类型：</strong> <code>string</code></p></li></ul>`,27)]))}const d=i(t,[["render",p]]);export{g as __pageData,d as default};
|
||||
1
docs/assets/api_form_form-props.md.BuujGPjG.lean.js
Normal file
1
docs/assets/api_form_form-props.md.BuujGPjG.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as i,y as a,z as l,b0 as n}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Form组件属性 props","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-props.md","filePath":"api/form/form-props.md"}'),t={name:"api/form/form-props.md"};function p(e,s,h,r,k,o){return l(),a("div",null,s[0]||(s[0]=[n("",27)]))}const d=i(t,[["render",p]]);export{g as __pageData,d as default};
|
||||
1
docs/assets/api_stage_coreEvents.md.DWLYMszB.js
Normal file
1
docs/assets/api_stage_coreEvents.md.DWLYMszB.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as a,y as t,z as r,b0 as i}from"./chunks/framework.BCBheFgR.js";const m=JSON.parse('{"title":"stage事件","description":"","frontmatter":{},"headers":[],"relativePath":"api/stage/coreEvents.md","filePath":"api/stage/coreEvents.md"}'),h={name:"api/stage/coreEvents.md"};function l(o,e,s,n,d,c){return r(),t("div",null,e[0]||(e[0]=[i('<h1 id="stage事件" tabindex="-1">stage事件 <a class="header-anchor" href="#stage事件" aria-label="Permalink to "stage事件""></a></h1><h2 id="runtime-ready" tabindex="-1">runtime-ready <a class="header-anchor" href="#runtime-ready" aria-label="Permalink to "runtime-ready""></a></h2><h2 id="mounted" tabindex="-1">mounted <a class="header-anchor" href="#mounted" aria-label="Permalink to "mounted""></a></h2><h2 id="highlight" tabindex="-1">highlight <a class="header-anchor" href="#highlight" aria-label="Permalink to "highlight""></a></h2><h2 id="update" tabindex="-1">update <a class="header-anchor" href="#update" aria-label="Permalink to "update""></a></h2><h2 id="select" tabindex="-1">select <a class="header-anchor" href="#select" aria-label="Permalink to "select""></a></h2><h2 id="multi-select" tabindex="-1">multi-select <a class="header-anchor" href="#multi-select" aria-label="Permalink to "multi-select""></a></h2><h2 id="select-parent" tabindex="-1">select-parent <a class="header-anchor" href="#select-parent" aria-label="Permalink to "select-parent""></a></h2><h2 id="sort" tabindex="-1">sort <a class="header-anchor" href="#sort" aria-label="Permalink to "sort""></a></h2><h2 id="update-1" tabindex="-1">update <a class="header-anchor" href="#update-1" aria-label="Permalink to "update""></a></h2><h2 id="change-guides" tabindex="-1">change-guides <a class="header-anchor" href="#change-guides" aria-label="Permalink to "change-guides""></a></h2>',11)]))}const p=a(h,[["render",l]]);export{m as __pageData,p as default};
|
||||
1
docs/assets/api_stage_coreEvents.md.DWLYMszB.lean.js
Normal file
1
docs/assets/api_stage_coreEvents.md.DWLYMszB.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as a,y as t,z as r,b0 as i}from"./chunks/framework.BCBheFgR.js";const m=JSON.parse('{"title":"stage事件","description":"","frontmatter":{},"headers":[],"relativePath":"api/stage/coreEvents.md","filePath":"api/stage/coreEvents.md"}'),h={name:"api/stage/coreEvents.md"};function l(o,e,s,n,d,c){return r(),t("div",null,e[0]||(e[0]=[i("",11)]))}const p=a(h,[["render",l]]);export{m as __pageData,p as default};
|
||||
1
docs/assets/api_stage_coreMethods.md.DiiD7c0X.js
Normal file
1
docs/assets/api_stage_coreMethods.md.DiiD7c0X.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as e,y as t,z as l,b0 as r}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"stage方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/stage/coreMethods.md","filePath":"api/stage/coreMethods.md"}'),o={name:"api/stage/coreMethods.md"};function i(s,a,n,d,h,u){return l(),t("div",null,a[0]||(a[0]=[r('<h1 id="stage方法" tabindex="-1">stage方法 <a class="header-anchor" href="#stage方法" aria-label="Permalink to "stage方法""></a></h1><h2 id="select" tabindex="-1">select <a class="header-anchor" href="#select" aria-label="Permalink to "select""></a></h2><ul><li><strong>详情：</strong> 单选选中元素</li></ul><h2 id="multiselect" tabindex="-1">multiSelect <a class="header-anchor" href="#multiselect" aria-label="Permalink to "multiSelect""></a></h2><ul><li><strong>详情：</strong> 多选选中多个元素</li></ul><h2 id="highlight" tabindex="-1">highlight <a class="header-anchor" href="#highlight" aria-label="Permalink to "highlight""></a></h2><ul><li><strong>详情：</strong> 高亮选中元素</li></ul><h2 id="update" tabindex="-1">update <a class="header-anchor" href="#update" aria-label="Permalink to "update""></a></h2><ul><li><strong>详情：</strong> 更新组件</li></ul><h2 id="add" tabindex="-1">add <a class="header-anchor" href="#add" aria-label="Permalink to "add""></a></h2><ul><li><strong>详情：</strong> 往画布增加一个组件</li></ul><h2 id="remove" tabindex="-1">remove <a class="header-anchor" href="#remove" aria-label="Permalink to "remove""></a></h2><ul><li><strong>详情：</strong> 从画布删除一个组件</li></ul><h2 id="setzoom" tabindex="-1">setZoom <a class="header-anchor" href="#setzoom" aria-label="Permalink to "setZoom""></a></h2><ul><li><strong>详情：</strong></li></ul><h2 id="mount" tabindex="-1">mount <a class="header-anchor" href="#mount" aria-label="Permalink to "mount""></a></h2><ul><li><strong>详情：</strong> 挂载Dom节点</li></ul><h2 id="clearguides" tabindex="-1">clearGuides <a class="header-anchor" href="#clearguides" aria-label="Permalink to "clearGuides""></a></h2><ul><li><strong>详情：</strong> 清空所有参考线</li></ul><h2 id="clearguides-1" tabindex="-1">clearGuides <a class="header-anchor" href="#clearguides-1" aria-label="Permalink to "clearGuides""></a></h2><ul><li><strong>详情：</strong> 清空所有参考线</li></ul><h2 id="delayedmarkcontainer" tabindex="-1">delayedMarkContainer <a class="header-anchor" href="#delayedmarkcontainer" aria-label="Permalink to "delayedMarkContainer""></a></h2><ul><li><strong>详情：</strong></li></ul><p>鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记</p><p>标记的作用：</p><p>1、高亮容器，给用户一个加入容器的交互感知；</p><p>2、释放鼠标后，通过标记的标志找到要加入的容器</p><h2 id="destroy" tabindex="-1">destroy <a class="header-anchor" href="#destroy" aria-label="Permalink to "destroy""></a></h2><ul><li><strong>详情：</strong> 销毁实例</li></ul>',29)]))}const m=e(o,[["render",i]]);export{g as __pageData,m as default};
|
||||
1
docs/assets/api_stage_coreMethods.md.DiiD7c0X.lean.js
Normal file
1
docs/assets/api_stage_coreMethods.md.DiiD7c0X.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as e,y as t,z as l,b0 as r}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"stage方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/stage/coreMethods.md","filePath":"api/stage/coreMethods.md"}'),o={name:"api/stage/coreMethods.md"};function i(s,a,n,d,h,u){return l(),t("div",null,a[0]||(a[0]=[r("",29)]))}const m=e(o,[["render",i]]);export{g as __pageData,m as default};
|
||||
1
docs/assets/api_table_events.md.CfFQQmdb.js
Normal file
1
docs/assets/api_table_events.md.CfFQQmdb.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as a,y as t,z as l,b0 as n}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"Table组件 events","description":"","frontmatter":{},"headers":[],"relativePath":"api/table/events.md","filePath":"api/table/events.md"}'),c={name:"api/table/events.md"};function r(o,e,i,s,h,d){return l(),t("div",null,e[0]||(e[0]=[n('<h1 id="table组件-events" tabindex="-1">Table组件 events <a class="header-anchor" href="#table组件-events" aria-label="Permalink to "Table组件 events""></a></h1><h2 id="sort-change" tabindex="-1">sort-change <a class="header-anchor" href="#sort-change" aria-label="Permalink to "sort-change""></a></h2><h2 id="after-action" tabindex="-1">after-action <a class="header-anchor" href="#after-action" aria-label="Permalink to "after-action""></a></h2><h2 id="select" tabindex="-1">select <a class="header-anchor" href="#select" aria-label="Permalink to "select""></a></h2><h2 id="select-all" tabindex="-1">select-all <a class="header-anchor" href="#select-all" aria-label="Permalink to "select-all""></a></h2><h2 id="selection-change" tabindex="-1">selection-change <a class="header-anchor" href="#selection-change" aria-label="Permalink to "selection-change""></a></h2><h2 id="expand-change" tabindex="-1">expand-change <a class="header-anchor" href="#expand-change" aria-label="Permalink to "expand-change""></a></h2><h2 id="cell-click" tabindex="-1">cell-click <a class="header-anchor" href="#cell-click" aria-label="Permalink to "cell-click""></a></h2>',8)]))}const f=a(c,[["render",r]]);export{u as __pageData,f as default};
|
||||
1
docs/assets/api_table_events.md.CfFQQmdb.lean.js
Normal file
1
docs/assets/api_table_events.md.CfFQQmdb.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as a,y as t,z as l,b0 as n}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"Table组件 events","description":"","frontmatter":{},"headers":[],"relativePath":"api/table/events.md","filePath":"api/table/events.md"}'),c={name:"api/table/events.md"};function r(o,e,i,s,h,d){return l(),t("div",null,e[0]||(e[0]=[n("",8)]))}const f=a(c,[["render",r]]);export{u as __pageData,f as default};
|
||||
1
docs/assets/api_table_methods.md.DK7PIkqn.js
Normal file
1
docs/assets/api_table_methods.md.DK7PIkqn.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as a,y as t,z as o,b0 as l}from"./chunks/framework.BCBheFgR.js";const _=JSON.parse('{"title":"Table组件 methods","description":"","frontmatter":{},"headers":[],"relativePath":"api/table/methods.md","filePath":"api/table/methods.md"}'),r={name:"api/table/methods.md"};function n(i,e,s,c,d,h){return o(),t("div",null,e[0]||(e[0]=[l('<h1 id="table组件-methods" tabindex="-1">Table组件 methods <a class="header-anchor" href="#table组件-methods" aria-label="Permalink to "Table组件 methods""></a></h1><h2 id="togglerowselection" tabindex="-1">toggleRowSelection <a class="header-anchor" href="#togglerowselection" aria-label="Permalink to "toggleRowSelection""></a></h2><h2 id="togglerowexpansion" tabindex="-1">toggleRowExpansion <a class="header-anchor" href="#togglerowexpansion" aria-label="Permalink to "toggleRowExpansion""></a></h2><h2 id="clearselection" tabindex="-1">clearSelection <a class="header-anchor" href="#clearselection" aria-label="Permalink to "clearSelection""></a></h2>',4)]))}const p=a(r,[["render",n]]);export{_ as __pageData,p as default};
|
||||
1
docs/assets/api_table_methods.md.DK7PIkqn.lean.js
Normal file
1
docs/assets/api_table_methods.md.DK7PIkqn.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as a,y as t,z as o,b0 as l}from"./chunks/framework.BCBheFgR.js";const _=JSON.parse('{"title":"Table组件 methods","description":"","frontmatter":{},"headers":[],"relativePath":"api/table/methods.md","filePath":"api/table/methods.md"}'),r={name:"api/table/methods.md"};function n(i,e,s,c,d,h){return o(),t("div",null,e[0]||(e[0]=[l("",4)]))}const p=a(r,[["render",n]]);export{_ as __pageData,p as default};
|
||||
1
docs/assets/api_table_props.md.DO3IJxZ9.js
Normal file
1
docs/assets/api_table_props.md.DO3IJxZ9.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as l,y as t,z as r,b0 as o}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"Table组件 props","description":"","frontmatter":{},"headers":[],"relativePath":"api/table/props.md","filePath":"api/table/props.md"}'),e={name:"api/table/props.md"};function n(i,a,s,p,d,h){return r(),t("div",null,a[0]||(a[0]=[o('<h1 id="table组件-props" tabindex="-1">Table组件 props <a class="header-anchor" href="#table组件-props" aria-label="Permalink to "Table组件 props""></a></h1><h2 id="data" tabindex="-1">data <a class="header-anchor" href="#data" aria-label="Permalink to "data""></a></h2><ul><li><p><strong>详情：</strong></p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="columns" tabindex="-1">columns <a class="header-anchor" href="#columns" aria-label="Permalink to "columns""></a></h2><ul><li><p><strong>详情：</strong></p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="spanmethod" tabindex="-1">spanMethod <a class="header-anchor" href="#spanmethod" aria-label="Permalink to "spanMethod""></a></h2><ul><li><p><strong>详情：</strong> 合并行或列的计算方法</p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="loading" tabindex="-1">loading <a class="header-anchor" href="#loading" aria-label="Permalink to "loading""></a></h2><ul><li><p><strong>详情：</strong></p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="showheader" tabindex="-1">showHeader <a class="header-anchor" href="#showheader" aria-label="Permalink to "showHeader""></a></h2><ul><li><p><strong>详情：</strong> 是否显示表头</p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="bodyheight" tabindex="-1">bodyHeight <a class="header-anchor" href="#bodyheight" aria-label="Permalink to "bodyHeight""></a></h2><ul><li><p><strong>详情：</strong> Table的最大高度。合法的值为数字或者单位为 px 的高度</p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="emptytext" tabindex="-1">emptyText <a class="header-anchor" href="#emptytext" aria-label="Permalink to "emptyText""></a></h2><ul><li><p><strong>详情：</strong> 空数据时显示的文本内容</p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="defaultexpandall" tabindex="-1">defaultExpandAll <a class="header-anchor" href="#defaultexpandall" aria-label="Permalink to "defaultExpandAll""></a></h2><ul><li><p><strong>详情：</strong> 是否默认展开所有行，当Table包含展开行存在或者为树形表格时有效</p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="rowkeyname" tabindex="-1">rowkeyName <a class="header-anchor" href="#rowkeyname" aria-label="Permalink to "rowkeyName""></a></h2><ul><li><p><strong>详情：</strong></p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul><h2 id="border" tabindex="-1">border <a class="header-anchor" href="#border" aria-label="Permalink to "border""></a></h2><ul><li><p><strong>详情：</strong></p></li><li><p><strong>默认值：</strong></p></li><li><p><strong>类型：</strong></p></li></ul>',21)]))}const b=l(e,[["render",n]]);export{u as __pageData,b as default};
|
||||
1
docs/assets/api_table_props.md.DO3IJxZ9.lean.js
Normal file
1
docs/assets/api_table_props.md.DO3IJxZ9.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as l,y as t,z as r,b0 as o}from"./chunks/framework.BCBheFgR.js";const u=JSON.parse('{"title":"Table组件 props","description":"","frontmatter":{},"headers":[],"relativePath":"api/table/props.md","filePath":"api/table/props.md"}'),e={name:"api/table/props.md"};function n(i,a,s,p,d,h){return r(),t("div",null,a[0]||(a[0]=[o("",21)]))}const b=l(e,[["render",n]]);export{u as __pageData,b as default};
|
||||
1
docs/assets/app.CTxZuwPV.js
Normal file
1
docs/assets/app.CTxZuwPV.js
Normal file
@ -0,0 +1 @@
|
||||
import{R as p}from"./chunks/theme.CgftMYhc.js";import{aL as s,aP as i,aQ as u,aR as c,aS as l,aT as f,aU as d,aV as m,aW as h,aX as g,aY as A,x as P,ax as R,j as v,h as w,aZ as y,a_ as C,a$ as S,af as T}from"./chunks/framework.BCBheFgR.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(p),b=P({name:"VitePressApp",setup(){const{site:e,lang:a,dir:t}=R();return v(()=>{w(()=>{document.documentElement.lang=a.value,document.documentElement.dir=t.value})}),e.value.router.prefetchLinks&&y(),C(),S(),n.setup&&n.setup(),()=>T(n.Layout)}});async function E(){globalThis.__VITEPRESS__=!0;const e=_(),a=x();a.provide(u,e);const t=c(e.route);return a.provide(l,t),a.component("Content",f),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:m}),{app:a,router:e,data:t}}function x(){return A(b)}function _(){let e=s;return h(a=>{let t=g(a),o=null;return t&&(e&&(t=t.replace(/\.js$/,".lean.js")),o=import(t)),s&&(e=!1),o},n.NotFound)}s&&E().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{E as createApp};
|
||||
1
docs/assets/chunks/@localSearchIndexroot.-Q0cGY0J.js
Normal file
1
docs/assets/chunks/@localSearchIndexroot.-Q0cGY0J.js
Normal file
File diff suppressed because one or more lines are too long
8
docs/assets/chunks/VPLocalSearchBox.CyY5vXw3.js
Normal file
8
docs/assets/chunks/VPLocalSearchBox.CyY5vXw3.js
Normal file
File diff suppressed because one or more lines are too long
18
docs/assets/chunks/framework.BCBheFgR.js
Normal file
18
docs/assets/chunks/framework.BCBheFgR.js
Normal file
File diff suppressed because one or more lines are too long
77
docs/assets/chunks/theme.CgftMYhc.js
Normal file
77
docs/assets/chunks/theme.CgftMYhc.js
Normal file
File diff suppressed because one or more lines are too long
1
docs/assets/form-config_compare.md.CzwGEwJZ.js
Normal file
1
docs/assets/form-config_compare.md.CzwGEwJZ.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as e,y as t,z as r,b0 as o}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"表单对比","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/compare.md","filePath":"form-config/compare.md"}'),i={name:"form-config/compare.md"};function n(c,a,l,m,d,p){return r(),t("div",null,a[0]||(a[0]=[o('<h1 id="表单对比" tabindex="-1">表单对比 <a class="header-anchor" href="#表单对比" aria-label="Permalink to "表单对比""></a></h1><p>tmagic-form可以支持两个版本的表单值对比，如果有容器嵌套，将在tab标签页展示对应tab下存在的差异数，便于在复杂嵌套表单场景下直观的看到差异情况</p><h2 id="使用方法" tabindex="-1">使用方法 <a class="header-anchor" href="#使用方法" aria-label="Permalink to "使用方法""></a></h2><p>在初始化表单时，需要传入当前版本的表单值，上一版本的表单值，以及表单配置，具体可参见<a href="https://tencent.github.io/tmagic-editor/playground/index.html#/form" target="_blank" rel="noreferrer">Form Playground</a>的demo演示</p><h2 id="效果展示" tabindex="-1">效果展示 <a class="header-anchor" href="#效果展示" aria-label="Permalink to "效果展示""></a></h2><img src="https://vip.image.video.qpic.cn/vupload/20230301/c626071677661813135.png" alt="表单对比">',6)]))}const f=e(i,[["render",n]]);export{h as __pageData,f as default};
|
||||
1
docs/assets/form-config_compare.md.CzwGEwJZ.lean.js
Normal file
1
docs/assets/form-config_compare.md.CzwGEwJZ.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as e,y as t,z as r,b0 as o}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"表单对比","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/compare.md","filePath":"form-config/compare.md"}'),i={name:"form-config/compare.md"};function n(c,a,l,m,d,p){return r(),t("div",null,a[0]||(a[0]=[o("",6)]))}const f=e(i,[["render",n]]);export{h as __pageData,f as default};
|
||||
1
docs/assets/form-config_fields_cascader.md.DVdum0nR.js
Normal file
1
docs/assets/form-config_fields_cascader.md.DVdum0nR.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as i,ag as d,y as u,z as t,A as a,P as n,L as l,H as o}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Cascader 级联选择器","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/cascader.md","filePath":"form-config/fields/cascader.md"}'),s={name:"form-config/fields/cascader.md"};function b(c,e,h,v,p,m){const r=d("demo-block");return t(),u("div",null,[e[3]||(e[3]=a("h1",{id:"cascader-级联选择器",tabindex:"-1"},[l("Cascader 级联选择器 "),a("a",{class:"header-anchor",href:"#cascader-级联选择器","aria-label":'Permalink to "Cascader 级联选择器"'},"")],-1)),e[4]||(e[4]=a("p",null,"当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。",-1)),e[5]||(e[5]=a("h2",{id:"基础用法",tabindex:"-1"},[l("基础用法 "),a("a",{class:"header-anchor",href:"#基础用法","aria-label":'Permalink to "基础用法"'},"")],-1)),e[6]||(e[6]=a("p",null,"有两种触发子菜单的方式",-1)),n(r,{type:"form",config:[{type:"cascader",name:"cascader",text:"选项",placeholder:"请选择",options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"}]},{value:"form",label:"Form",children:[{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"}]}]}]}]},{source:o(()=>e[0]||(e[0]=[a("p",null,"type为'cascader'",-1)])),_:1}),e[7]||(e[7]=a("h2",{id:"禁用选项",tabindex:"-1"},[l("禁用选项 "),a("a",{class:"header-anchor",href:"#禁用选项","aria-label":'Permalink to "禁用选项"'},"")],-1)),e[8]||(e[8]=a("p",null,"通过在数据源中设置 disabled 字段来声明该选项是禁用的",-1)),n(r,{type:"form",config:[{type:"cascader",name:"cascader",text:"选项",placeholder:"请选择",disabled:!0,options:[]},{type:"cascader",name:"cascader1",text:"选项2",placeholder:"请选择",options:[{value:"zhinan",label:"指南",disabled:!0,children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",disabled:!0,children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"}]},{value:"form",label:"Form",children:[{value:"checkbox",label:"Checkbox 多选框"},{value:"input",disabled:!0,label:"Input 输入框"}]}]}]}]},{source:o(()=>e[1]||(e[1]=[a("p",null," 本例中，options 指定的数组中的第一个元素含有 disabled: true 键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的 disabled 字段是否为 true ，如果你的数据中表示禁用含义的字段名不为 disabled ，可以通过 disabled 属性来指定（详见下方 API 表格）。当然， value 、 label 和 children 这三个字段名也可以通过同样的方式指定。 ",-1)])),_:1}),e[9]||(e[9]=a("h2",{id:"多选",tabindex:"-1"},[l("多选 "),a("a",{class:"header-anchor",href:"#多选","aria-label":'Permalink to "多选"'},"")],-1)),e[10]||(e[10]=a("p",null,[l("可通过 "),a("code",null,"multiple = true"),l(" 来开启多选模式")],-1)),n(r,{type:"form",config:[{type:"cascader",name:"cascader",text:"选项",multiple:!0,placeholder:"请选择",options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"}]},{value:"form",label:"Form",children:[{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"}]}]}]}]},{source:o(()=>e[2]||(e[2]=[a("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1})])}const x=i(s,[["render",b]]);export{g as __pageData,x as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as i,ag as d,y as u,z as t,A as a,P as n,L as l,H as o}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Cascader 级联选择器","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/cascader.md","filePath":"form-config/fields/cascader.md"}'),s={name:"form-config/fields/cascader.md"};function b(c,e,h,v,p,m){const r=d("demo-block");return t(),u("div",null,[e[3]||(e[3]=a("h1",{id:"cascader-级联选择器",tabindex:"-1"},[l("Cascader 级联选择器 "),a("a",{class:"header-anchor",href:"#cascader-级联选择器","aria-label":'Permalink to "Cascader 级联选择器"'},"")],-1)),e[4]||(e[4]=a("p",null,"当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。",-1)),e[5]||(e[5]=a("h2",{id:"基础用法",tabindex:"-1"},[l("基础用法 "),a("a",{class:"header-anchor",href:"#基础用法","aria-label":'Permalink to "基础用法"'},"")],-1)),e[6]||(e[6]=a("p",null,"有两种触发子菜单的方式",-1)),n(r,{type:"form",config:[{type:"cascader",name:"cascader",text:"选项",placeholder:"请选择",options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"}]},{value:"form",label:"Form",children:[{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"}]}]}]}]},{source:o(()=>e[0]||(e[0]=[a("p",null,"type为'cascader'",-1)])),_:1}),e[7]||(e[7]=a("h2",{id:"禁用选项",tabindex:"-1"},[l("禁用选项 "),a("a",{class:"header-anchor",href:"#禁用选项","aria-label":'Permalink to "禁用选项"'},"")],-1)),e[8]||(e[8]=a("p",null,"通过在数据源中设置 disabled 字段来声明该选项是禁用的",-1)),n(r,{type:"form",config:[{type:"cascader",name:"cascader",text:"选项",placeholder:"请选择",disabled:!0,options:[]},{type:"cascader",name:"cascader1",text:"选项2",placeholder:"请选择",options:[{value:"zhinan",label:"指南",disabled:!0,children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",disabled:!0,children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"}]},{value:"form",label:"Form",children:[{value:"checkbox",label:"Checkbox 多选框"},{value:"input",disabled:!0,label:"Input 输入框"}]}]}]}]},{source:o(()=>e[1]||(e[1]=[a("p",null," 本例中，options 指定的数组中的第一个元素含有 disabled: true 键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的 disabled 字段是否为 true ，如果你的数据中表示禁用含义的字段名不为 disabled ，可以通过 disabled 属性来指定（详见下方 API 表格）。当然， value 、 label 和 children 这三个字段名也可以通过同样的方式指定。 ",-1)])),_:1}),e[9]||(e[9]=a("h2",{id:"多选",tabindex:"-1"},[l("多选 "),a("a",{class:"header-anchor",href:"#多选","aria-label":'Permalink to "多选"'},"")],-1)),e[10]||(e[10]=a("p",null,[l("可通过 "),a("code",null,"multiple = true"),l(" 来开启多选模式")],-1)),n(r,{type:"form",config:[{type:"cascader",name:"cascader",text:"选项",multiple:!0,placeholder:"请选择",options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",children:[{value:"basic",label:"Basic",children:[{value:"layout",label:"Layout 布局"},{value:"color",label:"Color 色彩"}]},{value:"form",label:"Form",children:[{value:"checkbox",label:"Checkbox 多选框"},{value:"input",label:"Input 输入框"}]}]}]}]},{source:o(()=>e[2]||(e[2]=[a("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1})])}const x=i(s,[["render",b]]);export{g as __pageData,x as default};
|
||||
1
docs/assets/form-config_fields_checkbox.md.DE6q5Ibr.js
Normal file
1
docs/assets/form-config_fields_checkbox.md.DE6q5Ibr.js
Normal file
@ -0,0 +1 @@
|
||||
import{aw as n,ag as s,y as i,z as l,A as e,P as a,b0 as b,L as d,H as o}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Checkbox 多选框","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/checkbox.md","filePath":"form-config/fields/checkbox.md"}'),h={name:"form-config/fields/checkbox.md"};function c(m,t,u,x,k,f){const r=s("demo-block");return l(),i("div",null,[t[3]||(t[3]=e("h1",{id:"checkbox-多选框",tabindex:"-1"},[d("Checkbox 多选框 "),e("a",{class:"header-anchor",href:"#checkbox-多选框","aria-label":'Permalink to "Checkbox 多选框"'},"")],-1)),t[4]||(t[4]=e("p",null,"一组备选项中进行多选",-1)),t[5]||(t[5]=e("h2",{id:"基础用法",tabindex:"-1"},[d("基础用法 "),e("a",{class:"header-anchor",href:"#基础用法","aria-label":'Permalink to "基础用法"'},"")],-1)),t[6]||(t[6]=e("p",null,"单独使用可以表示两种状态之间的切换。",-1)),a(r,{type:"form",config:[{type:"checkbox",name:"checkbox",text:"选项"}]},{source:o(()=>t[0]||(t[0]=[e("p",null," 要使用 Checkbox 组件，只需要配置type: 'checkbox'，选中意味着变量的值为true。默认绑定变量的值会是 Boolean ，选中为 true 。 ",-1)])),_:1}),t[7]||(t[7]=e("h2",{id:"禁用状态",tabindex:"-1"},[d("禁用状态 "),e("a",{class:"header-anchor",href:"#禁用状态","aria-label":'Permalink to "禁用状态"'},"")],-1)),t[8]||(t[8]=e("p",null,"多选框不可用状态。",-1)),a(r,{type:"form",config:[{type:"checkbox",name:"checkbox",text:"选项",disabled:()=>!0}]},{source:o(()=>t[1]||(t[1]=[e("p",null," 设置 disabled 属性即可，它接受一个 Boolean ， true 为禁用，也可以接受一个返回 Boolean 的函数。 ",-1)])),_:1}),t[9]||(t[9]=e("h2",{id:"多选框组",tabindex:"-1"},[d("多选框组 "),e("a",{class:"header-anchor",href:"#多选框组","aria-label":'Permalink to "多选框组"'},"")],-1)),t[10]||(t[10]=e("p",null,"适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。",-1)),a(r,{type:"form",config:[{type:"checkbox-group",name:"checkbox",text:"选项",options:[{text:"选项1",value:1},{text:"选项2",value:2}]}]},{source:o(()=>t[2]||(t[2]=[e("p",null," checkbox-group 元素能把多个 checkbox 管理为一组。 ",-1)])),_:1}),t[11]||(t[11]=b('<h2 id="checkbox-attributes" tabindex="-1">Checkbox Attributes <a class="header-anchor" href="#checkbox-attributes" aria-label="Permalink to "Checkbox Attributes""></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>绑定值</td><td>string</td><td>—</td><td>—</td></tr><tr><td>text</td><td>表单标签</td><td>string</td><td>—</td><td>—</td></tr><tr><td>disabled</td><td>是否禁用</td><td>boolean / <a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts" target="_blank" rel="noreferrer">FilterFunction</a></td><td>—</td><td>false</td></tr><tr><td>activeValue</td><td>选中时的值</td><td>string / number / Function</td><td>—</td><td>1</td></tr><tr><td>inactiveValue</td><td>没有选中时的值</td><td>string / number / Function</td><td>—</td><td>0</td></tr><tr><td>onChange</td><td>值变化时触发的函数</td><td><a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts" target="_blank" rel="noreferrer">OnChangeHandler </a></td><td>—</td><td>-</td></tr></tbody></table><h2 id="checkboxgroup-attributes" tabindex="-1">CheckboxGroup Attributes <a class="header-anchor" href="#checkboxgroup-attributes" aria-label="Permalink to "CheckboxGroup Attributes""></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>绑定值</td><td>string</td><td>—</td><td>—</td></tr><tr><td>text</td><td>表单标签</td><td>string</td><td>—</td><td>—</td></tr><tr><td>disabled</td><td>是否禁用</td><td>boolean / <a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts" target="_blank" rel="noreferrer">FilterFunction</a></td><td>—</td><td>false</td></tr><tr><td>onChange</td><td>值变化时触发的函数</td><td><a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts" target="_blank" rel="noreferrer">OnChangeHandler</a></td><td>—</td><td>-</td></tr><tr><td>options</td><td>选项</td><td>Array</td><td>—</td><td>-</td></tr></tbody></table>',4))])}const C=n(h,[["render",c]]);export{g as __pageData,C as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as n,ag as s,y as i,z as l,A as e,P as a,b0 as b,L as d,H as o}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Checkbox 多选框","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/checkbox.md","filePath":"form-config/fields/checkbox.md"}'),h={name:"form-config/fields/checkbox.md"};function c(m,t,u,x,k,f){const r=s("demo-block");return l(),i("div",null,[t[3]||(t[3]=e("h1",{id:"checkbox-多选框",tabindex:"-1"},[d("Checkbox 多选框 "),e("a",{class:"header-anchor",href:"#checkbox-多选框","aria-label":'Permalink to "Checkbox 多选框"'},"")],-1)),t[4]||(t[4]=e("p",null,"一组备选项中进行多选",-1)),t[5]||(t[5]=e("h2",{id:"基础用法",tabindex:"-1"},[d("基础用法 "),e("a",{class:"header-anchor",href:"#基础用法","aria-label":'Permalink to "基础用法"'},"")],-1)),t[6]||(t[6]=e("p",null,"单独使用可以表示两种状态之间的切换。",-1)),a(r,{type:"form",config:[{type:"checkbox",name:"checkbox",text:"选项"}]},{source:o(()=>t[0]||(t[0]=[e("p",null," 要使用 Checkbox 组件，只需要配置type: 'checkbox'，选中意味着变量的值为true。默认绑定变量的值会是 Boolean ，选中为 true 。 ",-1)])),_:1}),t[7]||(t[7]=e("h2",{id:"禁用状态",tabindex:"-1"},[d("禁用状态 "),e("a",{class:"header-anchor",href:"#禁用状态","aria-label":'Permalink to "禁用状态"'},"")],-1)),t[8]||(t[8]=e("p",null,"多选框不可用状态。",-1)),a(r,{type:"form",config:[{type:"checkbox",name:"checkbox",text:"选项",disabled:()=>!0}]},{source:o(()=>t[1]||(t[1]=[e("p",null," 设置 disabled 属性即可，它接受一个 Boolean ， true 为禁用，也可以接受一个返回 Boolean 的函数。 ",-1)])),_:1}),t[9]||(t[9]=e("h2",{id:"多选框组",tabindex:"-1"},[d("多选框组 "),e("a",{class:"header-anchor",href:"#多选框组","aria-label":'Permalink to "多选框组"'},"")],-1)),t[10]||(t[10]=e("p",null,"适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。",-1)),a(r,{type:"form",config:[{type:"checkbox-group",name:"checkbox",text:"选项",options:[{text:"选项1",value:1},{text:"选项2",value:2}]}]},{source:o(()=>t[2]||(t[2]=[e("p",null," checkbox-group 元素能把多个 checkbox 管理为一组。 ",-1)])),_:1}),t[11]||(t[11]=b("",4))])}const C=n(h,[["render",c]]);export{g as __pageData,C as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as t,ag as l,y as i,z as n,A as o,P as c,L as r,H as s}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"ColorPicker 颜色选择器","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/color-picker.md","filePath":"form-config/fields/color-picker.md"}'),d={name:"form-config/fields/color-picker.md"};function p(f,e,m,k,P,u){const a=l("demo-block");return n(),i("div",null,[e[1]||(e[1]=o("h1",{id:"colorpicker-颜色选择器",tabindex:"-1"},[r("ColorPicker 颜色选择器 "),o("a",{class:"header-anchor",href:"#colorpicker-颜色选择器","aria-label":'Permalink to "ColorPicker 颜色选择器"'},"")],-1)),e[2]||(e[2]=o("p",null,"用于颜色选择，支持多种格式。",-1)),e[3]||(e[3]=o("h2",{id:"基础用法",tabindex:"-1"},[r("基础用法 "),o("a",{class:"header-anchor",href:"#基础用法","aria-label":'Permalink to "基础用法"'},"")],-1)),c(a,{type:"form",config:[{text:"颜色选择器",type:"colorPicker",name:"color"}]},{source:s(()=>e[0]||(e[0]=[o("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1})])}const b=t(d,[["render",p]]);export{g as __pageData,b as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as t,ag as l,y as i,z as n,A as o,P as c,L as r,H as s}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"ColorPicker 颜色选择器","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/color-picker.md","filePath":"form-config/fields/color-picker.md"}'),d={name:"form-config/fields/color-picker.md"};function p(f,e,m,k,P,u){const a=l("demo-block");return n(),i("div",null,[e[1]||(e[1]=o("h1",{id:"colorpicker-颜色选择器",tabindex:"-1"},[r("ColorPicker 颜色选择器 "),o("a",{class:"header-anchor",href:"#colorpicker-颜色选择器","aria-label":'Permalink to "ColorPicker 颜色选择器"'},"")],-1)),e[2]||(e[2]=o("p",null,"用于颜色选择，支持多种格式。",-1)),e[3]||(e[3]=o("h2",{id:"基础用法",tabindex:"-1"},[r("基础用法 "),o("a",{class:"header-anchor",href:"#基础用法","aria-label":'Permalink to "基础用法"'},"")],-1)),c(a,{type:"form",config:[{text:"颜色选择器",type:"colorPicker",name:"color"}]},{source:s(()=>e[0]||(e[0]=[o("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1})])}const b=t(d,[["render",p]]);export{g as __pageData,b as default};
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
import{aw as i,ag as n,y as s,z as l,A as d,P as r,b0 as c,L as o,H as a}from"./chunks/framework.BCBheFgR.js";const _=JSON.parse('{"title":"DatePicker 日期选择器","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/date-picker.md","filePath":"form-config/fields/date-picker.md"}'),m={name:"form-config/fields/date-picker.md"};function p(h,t,b,f,u,g){const e=n("demo-block");return l(),s("div",null,[t[3]||(t[3]=d("h1",{id:"datepicker-日期选择器",tabindex:"-1"},[o("DatePicker 日期选择器 "),d("a",{class:"header-anchor",href:"#datepicker-日期选择器","aria-label":'Permalink to "DatePicker 日期选择器"'},"")],-1)),t[4]||(t[4]=d("p",null,"用于选择或输入日期",-1)),t[5]||(t[5]=d("h2",{id:"基础用法",tabindex:"-1"},[o("基础用法 "),d("a",{class:"header-anchor",href:"#基础用法","aria-label":'Permalink to "基础用法"'},"")],-1)),r(e,{type:"form",config:[{type:"date",name:"date",text:"日期选择器"}]},{source:a(()=>t[0]||(t[0]=[d("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1}),t[6]||(t[6]=d("h2",{id:"禁用状态",tabindex:"-1"},[o("禁用状态 "),d("a",{class:"header-anchor",href:"#禁用状态","aria-label":'Permalink to "禁用状态"'},"")],-1)),r(e,{type:"form",config:[{type:"date",name:"date",text:"日期选择器",disabled:()=>!0}]},{source:a(()=>t[1]||(t[1]=[d("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1}),t[7]||(t[7]=c("",5)),r(e,{type:"form",config:[{type:"date",name:"date",text:"日期选择器",valueFormat:"timestamp"}]},{source:a(()=>t[2]||(t[2]=[d("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1}),t[8]||(t[8]=c("",2))])}const T=i(m,[["render",p]]);export{_ as __pageData,T as default};
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1 @@
|
||||
import{aw as i,ag as m,y as n,z as s,A as d,P as r,b0 as c,L as o,H as a}from"./chunks/framework.BCBheFgR.js";const T=JSON.parse('{"title":"DateTimePicker 日期时间选择器","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/datetime-picker.md","filePath":"form-config/fields/datetime-picker.md"}'),l={name:"form-config/fields/datetime-picker.md"};function h(p,t,f,b,u,g){const e=m("demo-block");return s(),n("div",null,[t[3]||(t[3]=d("h1",{id:"datetimepicker-日期时间选择器",tabindex:"-1"},[o("DateTimePicker 日期时间选择器 "),d("a",{class:"header-anchor",href:"#datetimepicker-日期时间选择器","aria-label":'Permalink to "DateTimePicker 日期时间选择器"'},"")],-1)),t[4]||(t[4]=d("p",null,"在同一个选择器里选择日期和时间",-1)),t[5]||(t[5]=d("h2",{id:"基础用法",tabindex:"-1"},[o("基础用法 "),d("a",{class:"header-anchor",href:"#基础用法","aria-label":'Permalink to "基础用法"'},"")],-1)),r(e,{type:"form",config:[{type:"datetime",name:"dateTime",text:"日期时间选择器"}]},{source:a(()=>t[0]||(t[0]=[d("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1}),t[6]||(t[6]=d("h2",{id:"禁用状态",tabindex:"-1"},[o("禁用状态 "),d("a",{class:"header-anchor",href:"#禁用状态","aria-label":'Permalink to "禁用状态"'},"")],-1)),r(e,{type:"form",config:[{type:"datetime",name:"dateTime",text:"日期时间选择器",disabled:()=>!0}]},{source:a(()=>t[1]||(t[1]=[d("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1}),t[7]||(t[7]=c("",5)),r(e,{type:"form",config:[{type:"datetime",name:"dateTime",text:"日期时间选择器",format:"yyyy-MM-dd",valueFormat:"timestamp"}]},{source:a(()=>t[2]||(t[2]=[d("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1}),t[8]||(t[8]=c("",2))])}const _=i(l,[["render",h]]);export{T as __pageData,_ as default};
|
||||
3
docs/assets/form-config_fields_display.md.B7Bf4Lpm.js
Normal file
3
docs/assets/form-config_fields_display.md.B7Bf4Lpm.js
Normal file
@ -0,0 +1,3 @@
|
||||
import{aw as e,ag as i,y as n,z as l,b0 as a,P as r,H as d,A as p}from"./chunks/framework.BCBheFgR.js";const b=JSON.parse('{"title":"Display 只读文本","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/display.md","filePath":"form-config/fields/display.md"}'),h={name:"form-config/fields/display.md"};function o(c,t,k,m,y,_){const s=i("demo-block");return l(),n("div",null,[t[1]||(t[1]=a(`<h1 id="display-只读文本" tabindex="-1">Display 只读文本 <a class="header-anchor" href="#display-只读文本" aria-label="Permalink to "Display 只读文本""></a></h1><p>用于显示，不可编辑</p><h2 id="ts-定义" tabindex="-1">TS 定义 <a class="header-anchor" href="#ts-定义" aria-label="Permalink to "TS 定义""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Display</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'display'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>点击查看<a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts" target="_blank" rel="noreferrer">FormItem</a>的定义</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to "基础用法""></a></h2>`,6)),r(s,{type:"form",config:[{type:"display",name:"display",text:"只读文本",defaultValue:"display"}]},{source:d(()=>t[0]||(t[0]=[p("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1}),t[2]||(t[2]=a('<h2 id="input-attributes" tabindex="-1">Input Attributes <a class="header-anchor" href="#input-attributes" aria-label="Permalink to "Input Attributes""></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>绑定值</td><td>string</td><td>—</td><td>—</td></tr><tr><td>text</td><td>表单标签</td><td>string</td><td>—</td><td>—</td></tr></tbody></table>',2))])}const g=e(h,[["render",o]]);export{b as __pageData,g as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as e,ag as i,y as n,z as l,b0 as a,P as r,H as d,A as p}from"./chunks/framework.BCBheFgR.js";const b=JSON.parse('{"title":"Display 只读文本","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/display.md","filePath":"form-config/fields/display.md"}'),h={name:"form-config/fields/display.md"};function o(c,t,k,m,y,_){const s=i("demo-block");return l(),n("div",null,[t[1]||(t[1]=a("",6)),r(s,{type:"form",config:[{type:"display",name:"display",text:"只读文本",defaultValue:"display"}]},{source:d(()=>t[0]||(t[0]=[p("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1}),t[2]||(t[2]=a("",2))])}const g=e(h,[["render",o]]);export{b as __pageData,g as default};
|
||||
3
docs/assets/form-config_fields_hidden.md.3tLOI4Ku.js
Normal file
3
docs/assets/form-config_fields_hidden.md.3tLOI4Ku.js
Normal file
@ -0,0 +1,3 @@
|
||||
import{aw as i,ag as s,y as n,z as d,b0 as a,P as r,H as h,A as l}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Hidden 隐藏域","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/hidden.md","filePath":"form-config/fields/hidden.md"}'),o={name:"form-config/fields/hidden.md"};function p(c,t,k,m,_,b){const e=s("demo-block");return d(),n("div",null,[t[1]||(t[1]=a(`<h1 id="hidden-隐藏域" tabindex="-1">Hidden 隐藏域 <a class="header-anchor" href="#hidden-隐藏域" aria-label="Permalink to "Hidden 隐藏域""></a></h1><p>改值体现于最终提交的表单中，用于例如编辑记录的id这种场景中</p><h2 id="ts-定义" tabindex="-1">TS 定义 <a class="header-anchor" href="#ts-定义" aria-label="Permalink to "TS 定义""></a></h2><div class="language-typescript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">interface</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Hidden</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> extends</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> FormItem</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
|
||||
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> type</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> 'hidden'</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
|
||||
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>点击查看<a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts" target="_blank" rel="noreferrer">FormItem</a>的定义</p><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to "基础用法""></a></h2>`,6)),r(e,{type:"form",config:[{type:"hidden",name:"hidden"}]},{source:h(()=>t[0]||(t[0]=[l("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1}),t[2]||(t[2]=a('<h2 id="input-attributes" tabindex="-1">Input Attributes <a class="header-anchor" href="#input-attributes" aria-label="Permalink to "Input Attributes""></a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>name</td><td>绑定值</td><td>string</td><td>—</td><td>—</td></tr></tbody></table>',2))])}const f=i(o,[["render",p]]);export{g as __pageData,f as default};
|
||||
@ -0,0 +1 @@
|
||||
import{aw as i,ag as s,y as n,z as d,b0 as a,P as r,H as h,A as l}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Hidden 隐藏域","description":"","frontmatter":{},"headers":[],"relativePath":"form-config/fields/hidden.md","filePath":"form-config/fields/hidden.md"}'),o={name:"form-config/fields/hidden.md"};function p(c,t,k,m,_,b){const e=s("demo-block");return d(),n("div",null,[t[1]||(t[1]=a("",6)),r(e,{type:"form",config:[{type:"hidden",name:"hidden"}]},{source:h(()=>t[0]||(t[0]=[l("p",null," 在开启多选模式后，默认情况下会展示所有已选中的选项的Tag ",-1)])),_:1}),t[2]||(t[2]=a("",2))])}const f=i(o,[["render",p]]);export{g as __pageData,f as default};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user