JLNTV_IPD/tmagic-editor
4
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2025-10-15 18:26:45 +08:00
Code Issues Projects Releases Wiki Activity
tmagic-editor/docs/guide/advanced/js-schema.html
github-actions[bot] 800d6bfc03 Deploy to GitHub pages
2025-10-13 12:36:28 +00:00

122 lines
49 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>JS Schema | tmagic-editor</title>
<meta name="description" content="页面可视化平台">
<meta name="generator" content="VitePress v1.6.4">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.xyC7psYm.css" as="style">
<link rel="preload stylesheet" href="/tmagic-editor/docs/vp-icons.css" as="style">
<script type="module" src="/tmagic-editor/docs/assets/app.BHsQPC5P.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.TlEeet8y.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.DEDtaMYN.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/guide_advanced_js-schema.md.DQcQmayB.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-fbcaff3c><!--[--><!--]--><!--[--><span tabindex="-1" data-v-6b3f9406></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-6b3f9406>Skip to content</a><!--]--><!----><header class="VPNav" data-v-fbcaff3c data-v-fe5537ad><div class="VPNavBar" data-v-fe5537ad data-v-ef6c0d51><div class="wrapper" data-v-ef6c0d51><div class="container" data-v-ef6c0d51><div class="title" data-v-ef6c0d51><div class="VPNavBarTitle has-sidebar" data-v-ef6c0d51 data-v-3aeaa7ed><a class="title" href="/tmagic-editor/docs/" data-v-3aeaa7ed><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-5537abb1><!--]--><span data-v-3aeaa7ed>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-ef6c0d51><div class="content-body" data-v-ef6c0d51><!--[--><!--]--><div class="VPNavBarSearch search" data-v-ef6c0d51><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-ef6c0d51 data-v-f9eb2011><span id="main-nav-aria-label" class="visually-hidden" data-v-f9eb2011> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tmagic-editor/docs/guide/" tabindex="0" data-v-f9eb2011 data-v-f01bf11b><!--[--><span data-v-f01bf11b>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" tabindex="0" data-v-f9eb2011 data-v-f01bf11b><!--[--><span data-v-f01bf11b>API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/form-config/fields/text.html" tabindex="0" data-v-f9eb2011 data-v-f01bf11b><!--[--><span data-v-f01bf11b>表单配置</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" target="_blank" rel="noreferrer" tabindex="0" data-v-f9eb2011 data-v-f01bf11b><!--[--><span data-v-f01bf11b>更新日志</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" target="_blank" rel="noreferrer" tabindex="0" data-v-f9eb2011 data-v-f01bf11b><!--[--><span data-v-f01bf11b>Playground</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-ef6c0d51 data-v-fff88d31><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-fff88d31 data-v-ff9022bc data-v-4e6c9a8c><span class="check" data-v-4e6c9a8c><span class="icon" data-v-4e6c9a8c><!--[--><span class="vpi-sun sun" data-v-ff9022bc></span><span class="vpi-moon moon" data-v-ff9022bc></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-ef6c0d51 data-v-77025b82 data-v-386fdc46><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="noopener" data-v-386fdc46 data-v-3e477edc><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-ef6c0d51 data-v-ef297dbb data-v-ea542616><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-ea542616><span class="vpi-more-horizontal icon" data-v-ea542616></span></button><div class="menu" data-v-ea542616><div class="VPMenu" data-v-ea542616 data-v-1ffa2cfc><!----><!--[--><!--[--><!----><div class="group" data-v-ef297dbb><div class="item appearance" data-v-ef297dbb><p class="label" data-v-ef297dbb>Appearance</p><div class="appearance-action" data-v-ef297dbb><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-ef297dbb data-v-ff9022bc data-v-4e6c9a8c><span class="check" data-v-4e6c9a8c><span class="icon" data-v-4e6c9a8c><!--[--><span class="vpi-sun sun" data-v-ff9022bc></span><span class="vpi-moon moon" data-v-ff9022bc></span><!--]--></span></span></button></div></div></div><div class="group" data-v-ef297dbb><div class="item social-links" data-v-ef297dbb><div class="VPSocialLinks social-links-list" data-v-ef297dbb data-v-386fdc46><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="noopener" data-v-386fdc46 data-v-3e477edc><span class="vpi-social-github"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-ef6c0d51 data-v-2307673e><span class="container" data-v-2307673e><span class="top" data-v-2307673e></span><span class="middle" data-v-2307673e></span><span class="bottom" data-v-2307673e></span></span></button></div></div></div></div><div class="divider" data-v-ef6c0d51><div class="divider-line" data-v-ef6c0d51></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-fbcaff3c data-v-4ae645a4><div class="container" data-v-4ae645a4><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-4ae645a4><span class="vpi-align-left menu-icon" data-v-4ae645a4></span><span class="menu-text" data-v-4ae645a4>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-4ae645a4 data-v-b2eb74a1><button data-v-b2eb74a1>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-fbcaff3c data-v-93040459><div class="curtain" data-v-93040459></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-93040459><span class="visually-hidden" id="sidebar-aria-label" data-v-93040459> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-04877d39><section class="VPSidebarItem level-0" data-v-04877d39 data-v-87adc36c><div class="item" role="button" tabindex="0" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><h2 class="text" data-v-87adc36c>文档</h2><!----></div><div class="items" data-v-87adc36c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/introduction.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>快速开始</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/conception.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>基础概念</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/publish.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>页面发布</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/runtime.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>RUNTIME</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/component.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>组件开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/editor-expand.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>编辑器扩展</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/migration.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>升级到1.5.x</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-04877d39><section class="VPSidebarItem level-0 has-active" data-v-04877d39 data-v-87adc36c><div class="item" role="button" tabindex="0" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><h2 class="text" data-v-87adc36c>进阶指南</h2><!----></div><div class="items" data-v-87adc36c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/js-schema.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>JS Schema</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/layout.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>布局原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/page.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>页面渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/coupling.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>联动原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/code-block.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>代码块</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/data-source.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>数据源</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/tmagic-ui.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>@tmagic/ui</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/tmagic-form.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>@tmagic/form</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-04877d39><section class="VPSidebarItem level-0" data-v-04877d39 data-v-87adc36c><div class="item" role="button" tabindex="0" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><h2 class="text" data-v-87adc36c>教程</h2><!----></div><div class="items" data-v-87adc36c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>写在前面</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/hello-world.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>1.Hello World</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/runtime.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>2.Runtime</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-87adc36c data-v-87adc36c><div class="item" data-v-87adc36c><div class="indicator" data-v-87adc36c></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/render.html" data-v-87adc36c><!--[--><p class="text" data-v-87adc36c>3.DSL解析渲染</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-fbcaff3c data-v-0754b34a><div class="VPDoc has-sidebar has-aside" data-v-0754b34a data-v-dc222886><!--[--><!--]--><div class="container" data-v-dc222886><div class="aside" data-v-dc222886><div class="aside-curtain" data-v-dc222886></div><div class="aside-container" data-v-dc222886><div class="aside-content" data-v-dc222886><div class="VPDocAside" data-v-dc222886 data-v-03938687><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-03938687 data-v-3944078d><div class="content" data-v-3944078d><div class="outline-marker" data-v-3944078d></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-3944078d>On this page</div><ul class="VPDocOutlineItem root" data-v-3944078d data-v-d3b18d32><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-03938687></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-dc222886><div class="content-container" data-v-dc222886><!--[--><!--]--><main class="main" data-v-dc222886><div style="position:relative;" class="vp-doc _tmagic-editor_docs_guide_advanced_js-schema" data-v-dc222886><div><h1 id="js-schema" tabindex="-1">JS Schema <a class="header-anchor" href="#js-schema" aria-label="Permalink to &quot;JS Schema&quot;">​</a></h1><p>tmagic-editor的业务组件需要有表单配置能力，我们通过一份配置来描述表单，我们采用的描述方案是 JS schema。当我们在编辑器中配置一个页面时，页面的基本信息和页面包含的组件信息，也是采用 JS schema 描述的。JS schema 描述方案，也是我们提供<a href="./../advanced/code-block.html">代码块</a>功能的基础。</p><p>组件的<strong>配置描述</strong>，参考<a href="./tmagic-form.html#示例">示例</a>，是由开发者在开发组件时，通过 <a href="./tmagic-form.html">@tmagic/form</a> 支持的表单项来提供的。</p><p>在编辑器中对页面进行编辑，保存得到的是一份关于页面基本信息、页面所包含组件以及组件配置信息的配置，我们称为 <strong>DSL</strong>，这份配置是最终页面渲染需要的描述信息。</p><p>JS schema 本质即是一个 js 对象，这个形式可以支持我们在组件的表单配置描述中，直接进行函数编写，功能灵活，对于前端开发来说更符合直觉，几乎没有理解成本。</p><h2 id="表单配置" tabindex="-1">表单配置 <a class="header-anchor" href="#表单配置" aria-label="Permalink to &quot;表单配置&quot;">​</a></h2><p>组件中的表单配置描述，在经过 @tmagic/form 表单渲染器后，可以生成表单栏的配置项。在表单栏中对表单进行配置，配置数据将动态写入 DSL 中。</p><img src="https://image.video.qpic.cn/oa_88b7d-36_673631168_1636343947880034?imageView2/q/70"><h2 id="dsl" tabindex="-1">DSL <a class="header-anchor" href="#dsl" aria-label="Permalink to &quot;DSL&quot;">​</a></h2><p>编辑器中生成的 DSL 序列化存储后，在发布时，将其作为 js 文件发布出去，供生成页使用。一个生成页最终保存的 DSL 配置示例如下：</p><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</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;"> id</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;75f0extui9d7yksklx27hff8xg&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> name</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;test_page&quot;</span><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;">&quot;app&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> beginTime</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2021-04-26T16:00:00.000Z&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> endTime</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2021-05-28T16:00:00.000Z&quot;</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>
<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;">&quot;page&quot;</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;">&quot;index&quot;</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;">&quot;1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> layout: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;absolute&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;375&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;1728&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> backgroundColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;rgba(218, 192, 192, 1)&quot;</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;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;39381280&quot;</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;">&quot;container&quot;</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;">&quot;组&quot;</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;">&quot;98549062&quot;</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;">&quot;button&quot;</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;">&quot;87016850&quot;</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;">&quot;按钮&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;absolute&quot;</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 style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">57</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> top: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">152</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> bottom: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">270</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">38</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> backgroundImage: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> backgroundColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#fb6f00&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> backgroundRepeat: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;no-repeat&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> backgroundSize: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100% 100%&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> transform: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;none&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> textAlign: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;center&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> border: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</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;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;magic:common:events:click&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> to: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;button_3877&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> method: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;&quot;</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;"> created</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: ()</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</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;">&quot;请输入文本内容&quot;</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;"> id: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;text_7909&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> left: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">88</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> top: </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">-</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">73</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;absolute&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">100</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">14</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> transform: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;none&quot;</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;">&quot;text&quot;</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;">&quot;文本&quot;</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;">&quot;请输入文本内容&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</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;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;button&quot;</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;">&quot;button_3877&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;absolute&quot;</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 style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;57&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;270&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;37.5&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> border: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> backgroundColor: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;#fb6f00&quot;</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;">&quot;按钮&quot;</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;">&quot;请输入文本内容&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</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;"> ],</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> style: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> width: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100%&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> height: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;100&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> position: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;absolute&quot;</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 style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> top: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">204</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></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-dc222886 data-v-82c4baab><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-82c4baab><span class="visually-hidden" id="doc-footer-aria-label" data-v-82c4baab>Pager</span><div class="pager" data-v-82c4baab><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/guide/migration.html" data-v-82c4baab><!--[--><span class="desc" data-v-82c4baab>Previous page</span><span class="title" data-v-82c4baab>升级到1.5.x</span><!--]--></a></div><div class="pager" data-v-82c4baab><a class="VPLink link pager-link next" href="/tmagic-editor/docs/guide/advanced/layout.html" data-v-82c4baab><!--[--><span class="desc" data-v-82c4baab>Next page</span><span class="title" data-v-82c4baab>布局原理</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-fbcaff3c data-v-6c5025f0><div class="container" data-v-6c5025f0><p class="message" data-v-6c5025f0>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-6c5025f0>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_editor_codeblockservicemethods.md\":\"DGcpjt7Y\",\"api_editor_componentlistservicemethods.md\":\"C_PHpcf7\",\"api_editor_datasourceservicemethods.md\":\"BK1-IYIf\",\"api_editor_editorserviceevents.md\":\"BKP2JYJu\",\"api_editor_editorservicemethods.md\":\"Chp6mGxN\",\"api_editor_events.md\":\"Bpu-Zv8M\",\"api_editor_eventsservicemethods.md\":\"ChEduFdX\",\"api_editor_historyserviceevents.md\":\"CDrfXTYw\",\"api_editor_historyservicemethods.md\":\"BBnXTdX3\",\"api_editor_props.md\":\"C4SB6Ttv\",\"api_editor_propsserviceevents.md\":\"D_PRNI-3\",\"api_editor_propsservicemethods.md\":\"C5N6250T\",\"api_editor_slots.md\":\"Cv155yb1\",\"api_editor_storageservicemethods.md\":\"Da33ZuHW\",\"api_editor_uiservicemethods.md\":\"w3ofvsGL\",\"api_form_form-dialog-events.md\":\"B0PDE3Gq\",\"api_form_form-dialog-methods.md\":\"BddU7Iwu\",\"api_form_form-dialog-props.md\":\"BItn8PPW\",\"api_form_form-events.md\":\"uRKp-hft\",\"api_form_form-methods.md\":\"Ccl8E50d\",\"api_form_form-props.md\":\"DdC0rETN\",\"api_stage_coreevents.md\":\"DlPfPIwb\",\"api_stage_coremethods.md\":\"BYRICiOt\",\"api_table_events.md\":\"C2XtCBjx\",\"api_table_methods.md\":\"G0LJYZxM\",\"api_table_props.md\":\"D9z911AZ\",\"form-config_compare.md\":\"CDTuyT2G\",\"form-config_fields_cascader.md\":\"CV5L9cW3\",\"form-config_fields_checkbox.md\":\"6fDzEJQp\",\"form-config_fields_color-picker.md\":\"CwI53lan\",\"form-config_fields_date-picker.md\":\"Of4lxufK\",\"form-config_fields_datetime-picker.md\":\"C1OpONeQ\",\"form-config_fields_display.md\":\"lb9CqCjD\",\"form-config_fields_hidden.md\":\"CD1ggpOL\",\"form-config_fields_link.md\":\"h5gkT6PD\",\"form-config_fields_number.md\":\"tWQb2X3S\",\"form-config_fields_radio.md\":\"D3qokUmH\",\"form-config_fields_select.md\":\"Cf-Hx-tv\",\"form-config_fields_switch.md\":\"NQMyufwt\",\"form-config_fields_text.md\":\"DEoiNYq1\",\"form-config_fields_textarea.md\":\"BrU-CWOk\",\"form-config_fields_time-picker.md\":\"B86n1bOA\",\"form-config_layout.md\":\"ChJffD9S\",\"form-config_relate.md\":\"kq0Xf_50\",\"guide_advanced_code-block.md\":\"6gxApOf5\",\"guide_advanced_coupling.md\":\"D4PHpOiK\",\"guide_advanced_data-source.md\":\"V8rKgDqW\",\"guide_advanced_js-schema.md\":\"DQcQmayB\",\"guide_advanced_layout.md\":\"Cv6ang4I\",\"guide_advanced_page.md\":\"Cu2qiv4V\",\"guide_advanced_tmagic-form.md\":\"CUSyuPM8\",\"guide_advanced_tmagic-ui.md\":\"D-TZM0qT\",\"guide_component.md\":\"yESXGFul\",\"guide_conception.md\":\"BeeClcrG\",\"guide_editor-expand.md\":\"DxdGpj5c\",\"guide_index.md\":\"DENvlqle\",\"guide_introduction.md\":\"D2nxsvT4\",\"guide_migration.md\":\"CNyKT99b\",\"guide_publish.md\":\"mhVTzbm9\",\"guide_runtime.md\":\"Cbi9yTgp\",\"guide_tutorial_hello-world.md\":\"C_GWfs7M\",\"guide_tutorial_index.md\":\"CPOclmnt\",\"guide_tutorial_render.md\":\"Cm5zXdDo\",\"guide_tutorial_runtime.md\":\"RAArfxHh\",\"index.md\":\"Dy1_jf4y\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"tmagic-editor\",\"description\":\"页面可视化平台\",\"base\":\"/tmagic-editor/docs/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"./favicon.png\",\"search\":{\"provider\":\"local\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/Tencent/tmagic-editor\"}],\"footer\":{\"message\":\"Powered by 腾讯视频会员平台技术中心\",\"copyright\":\"Copyright (C) 2025 Tencent.\"},\"nav\":[{\"text\":\"文档\",\"link\":\"/guide/\",\"activeMatch\":\"/guide/\"},{\"text\":\"API\",\"link\":\"/api/editor/props\",\"activeMatch\":\"/api/\"},{\"text\":\"表单配置\",\"link\":\"/form-config/fields/text\",\"activeMatch\":\"/form-config/\"},{\"text\":\"更新日志\",\"link\":\"https://github.com/Tencent/tmagic-editor/releases\"},{\"text\":\"Playground\",\"link\":\"https://tencent.github.io/tmagic-editor/playground/index.html\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"文档\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction.md\"},{\"text\":\"快速开始\",\"link\":\"/guide/\"},{\"text\":\"基础概念\",\"link\":\"/guide/conception.md\"},{\"text\":\"页面发布\",\"link\":\"/guide/publish.md\"},{\"text\":\"RUNTIME\",\"link\":\"/guide/runtime.md\"},{\"text\":\"组件开发\",\"link\":\"/guide/component.md\"},{\"text\":\"编辑器扩展\",\"link\":\"/guide/editor-expand.md\"},{\"text\":\"升级到1.5.x\",\"link\":\"/guide/migration.md\"}]},{\"text\":\"进阶指南\",\"items\":[{\"text\":\"JS Schema\",\"link\":\"/guide/advanced/js-schema.md\"},{\"text\":\"布局原理\",\"link\":\"/guide/advanced/layout.md\"},{\"text\":\"页面渲染\",\"link\":\"/guide/advanced/page.md\"},{\"text\":\"联动原理\",\"link\":\"/guide/advanced/coupling.md\"},{\"text\":\"代码块\",\"link\":\"/guide/advanced/code-block.md\"},{\"text\":\"数据源\",\"link\":\"/guide/advanced/data-source.md\"},{\"text\":\"@tmagic/ui\",\"link\":\"/guide/advanced/tmagic-ui.md\"},{\"text\":\"@tmagic/form\",\"link\":\"/guide/advanced/tmagic-form.md\"}]},{\"text\":\"教程\",\"items\":[{\"text\":\"写在前面\",\"link\":\"/guide/tutorial/\"},{\"text\":\"1.Hello World\",\"link\":\"/guide/tutorial/hello-world.md\"},{\"text\":\"2.Runtime\",\"link\":\"/guide/tutorial/runtime.md\"},{\"text\":\"3.DSL解析渲染\",\"link\":\"/guide/tutorial/render.md\"}]}],\"/api/\":[{\"text\":\"编辑器\",\"items\":[{\"text\":\"Editor组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/editor/props.md\"},{\"text\":\"slots\",\"link\":\"/api/editor/slots.md\"},{\"text\":\"events\",\"link\":\"/api/editor/events.md\"}]},{\"text\":\"editorService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/editorServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/editorServiceEvents.md\"}]},{\"text\":\"propsService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/propsServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/propsServiceEvents.md\"}]},{\"text\":\"historyService\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/historyServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/historyServiceEvents.md\"}]},{\"text\":\"eventsService\",\"link\":\"/api/editor/eventsServiceMethods.md\"},{\"text\":\"uiService\",\"link\":\"/api/editor/uiServiceMethods.md\"},{\"text\":\"codeBlockService\",\"link\":\"/api/editor/codeBlockServiceMethods.md\"},{\"text\":\"componentListService\",\"link\":\"/api/editor/componentListServiceMethods.md\"},{\"text\":\"storageService\",\"link\":\"/api/editor/storageServiceMethods.md\"}]},{\"text\":\"表单\",\"items\":[{\"text\":\"Form组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/form/form-props\"},{\"text\":\"methods\",\"link\":\"/api/form/form-methods\"},{\"text\":\"events\",\"link\":\"/api/form/form-events\"}]},{\"text\":\"FormDialog组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/form/form-dialog-props\"},{\"text\":\"methods\",\"link\":\"/api/form/form-dialog-methods\"},{\"text\":\"events\",\"link\":\"/api/form/form-dialog-events\"}]}]},{\"text\":\"表格\",\"items\":[{\"text\":\"Table组件\",\"items\":[{\"text\":\"props\",\"link\":\"/api/table/props\"},{\"text\":\"methods\",\"link\":\"/api/table/methods\"},{\"text\":\"events\",\"link\":\"/api/table/events\"}]}]},{\"text\":\"stage\",\"items\":[{\"text\":\"StageCore\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/stage/coreMethods\"},{\"text\":\"事件\",\"link\":\"/api/stage/coreEvents\"}]}]}],\"/form-config/\":[{\"text\":\"基础配置\",\"items\":[{\"text\":\"Input输入框\",\"link\":\"/form-config/fields/text.md\"},{\"text\":\"Textarea文本域\",\"link\":\"/form-config/fields/textarea.md\"},{\"text\":\"InputNumber计数器\",\"link\":\"/form-config/fields/number.md\"},{\"text\":\"Display只读文本\",\"link\":\"/form-config/fields/display.md\"},{\"text\":\"Hidden隐藏域\",\"link\":\"/form-config/fields/hidden.md\"},{\"text\":\"Link链接\",\"link\":\"/form-config/fields/link.md\"},{\"text\":\"Checkbox多选框\",\"link\":\"/form-config/fields/checkbox.md\"},{\"text\":\"Radio单选框\",\"link\":\"/form-config/fields/radio.md\"},{\"text\":\"Switch开关\",\"link\":\"/form-config/fields/switch.md\"},{\"text\":\"Select选择器\",\"link\":\"/form-config/fields/select.md\"},{\"text\":\"Cascader级联选择器\",\"link\":\"/form-config/fields/cascader.md\"},{\"text\":\"ColorPicker颜色选择器\",\"link\":\"/form-config/fields/color-picker.md\"},{\"text\":\"DatePick日期选择器\",\"link\":\"/form-config/fields/date-picker.md\"},{\"text\":\"DatetimePick日期时间选择器\",\"link\":\"/form-config/fields/datetime-picker.md\"},{\"text\":\"TimePick时间选择器\",\"link\":\"/form-config/fields/time-picker.md\"}]},{\"text\":\"布局配置\",\"items\":[{\"text\":\"布局\",\"link\":\"/form-config/layout.md\"}]},{\"text\":\"联动配置\",\"items\":[{\"text\":\"联动\",\"link\":\"/form-config/relate.md\"}]},{\"text\":\"表单对比\",\"items\":[{\"text\":\"表单对比\",\"link\":\"/form-config/compare.md\"}]}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink