github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-03-18 11:43:45 +00:00
Code Issues Packages Projects Releases Wiki Activity
tmagic-editor/docs/guide/advanced/tmagic-form.html
github-actions[bot] cbf45485bc Deploy to GitHub pages
2026-03-17 09:41:49 +00:00

148 lines
54 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>@tmagic/form | 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.DP576E0A.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.aYe_U73X.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.CBF3IgiO.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.DkLJC2NO.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/guide_advanced_tmagic-form.md.Ctv1XIF5.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-743c5849><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ea404b03></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ea404b03>Skip to content</a><!--]--><!----><header class="VPNav" data-v-743c5849 data-v-0718cc1b><div class="VPNavBar" data-v-0718cc1b data-v-3b5e7c6f><div class="wrapper" data-v-3b5e7c6f><div class="container" data-v-3b5e7c6f><div class="title" data-v-3b5e7c6f><div class="VPNavBarTitle has-sidebar" data-v-3b5e7c6f data-v-7055e5ab><a class="title" href="/tmagic-editor/docs/" data-v-7055e5ab><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-0b4870dd><!--]--><span data-v-7055e5ab>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-3b5e7c6f><div class="content-body" data-v-3b5e7c6f><!--[--><!--]--><div class="VPNavBarSearch search" data-v-3b5e7c6f><!--[--><!----><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-3b5e7c6f data-v-a1b710be><span id="main-nav-aria-label" class="visually-hidden" data-v-a1b710be> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tmagic-editor/docs/guide/" tabindex="0" data-v-a1b710be data-v-7ea9b7f6><!--[--><span data-v-7ea9b7f6>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" tabindex="0" data-v-a1b710be data-v-7ea9b7f6><!--[--><span data-v-7ea9b7f6>Editor API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/runtime-api/core/app.html" tabindex="0" data-v-a1b710be data-v-7ea9b7f6><!--[--><span data-v-7ea9b7f6>Runtime API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/form-config/fields/text.html" tabindex="0" data-v-a1b710be data-v-7ea9b7f6><!--[--><span data-v-7ea9b7f6>表单配置</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-a1b710be data-v-7ea9b7f6><!--[--><span data-v-7ea9b7f6>更新日志</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-a1b710be data-v-7ea9b7f6><!--[--><span data-v-7ea9b7f6>Playground</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-3b5e7c6f data-v-e4185feb><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-e4185feb data-v-772bb1de data-v-a3c5e2b0><span class="check" data-v-a3c5e2b0><span class="icon" data-v-a3c5e2b0><!--[--><span class="vpi-sun sun" data-v-772bb1de></span><span class="vpi-moon moon" data-v-772bb1de></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-3b5e7c6f data-v-e75c163e data-v-02bd764f><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="noopener" data-v-02bd764f data-v-1940e57c><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-3b5e7c6f data-v-f26678d1 data-v-c49cb7dc><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-c49cb7dc><span class="vpi-more-horizontal icon" data-v-c49cb7dc></span></button><div class="menu" data-v-c49cb7dc><div class="VPMenu" data-v-c49cb7dc data-v-dd950a1a><!----><!--[--><!--[--><!----><div class="group" data-v-f26678d1><div class="item appearance" data-v-f26678d1><p class="label" data-v-f26678d1>Appearance</p><div class="appearance-action" data-v-f26678d1><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-f26678d1 data-v-772bb1de data-v-a3c5e2b0><span class="check" data-v-a3c5e2b0><span class="icon" data-v-a3c5e2b0><!--[--><span class="vpi-sun sun" data-v-772bb1de></span><span class="vpi-moon moon" data-v-772bb1de></span><!--]--></span></span></button></div></div></div><div class="group" data-v-f26678d1><div class="item social-links" data-v-f26678d1><div class="VPSocialLinks social-links-list" data-v-f26678d1 data-v-02bd764f><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="noopener" data-v-02bd764f data-v-1940e57c><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-3b5e7c6f data-v-ece0369a><span class="container" data-v-ece0369a><span class="top" data-v-ece0369a></span><span class="middle" data-v-ece0369a></span><span class="bottom" data-v-ece0369a></span></span></button></div></div></div></div><div class="divider" data-v-3b5e7c6f><div class="divider-line" data-v-3b5e7c6f></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-743c5849 data-v-161d8246><div class="container" data-v-161d8246><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-161d8246><span class="vpi-align-left menu-icon" data-v-161d8246></span><span class="menu-text" data-v-161d8246>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-161d8246 data-v-50d4feed><button data-v-50d4feed>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-743c5849 data-v-667fd097><div class="curtain" data-v-667fd097></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-667fd097><span class="visually-hidden" id="sidebar-aria-label" data-v-667fd097> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-3ee04650><section class="VPSidebarItem level-0" data-v-3ee04650 data-v-e5415158><div class="item" role="button" tabindex="0" data-v-e5415158><div class="indicator" data-v-e5415158></div><h2 class="text" data-v-e5415158>文档</h2><!----></div><div class="items" data-v-e5415158><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/introduction.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/" data-v-e5415158><!--[--><p class="text" data-v-e5415158>快速开始</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/runtime.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>RUNTIME</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/component.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>组件开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/conception.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>基础概念</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/publish.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>页面发布</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/editor-expand.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>编辑器扩展</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/migration.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>升级到1.5.x</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-3ee04650><section class="VPSidebarItem level-0 has-active" data-v-3ee04650 data-v-e5415158><div class="item" role="button" tabindex="0" data-v-e5415158><div class="indicator" data-v-e5415158></div><h2 class="text" data-v-e5415158>进阶指南</h2><!----></div><div class="items" data-v-e5415158><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/js-schema.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>JS Schema</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/layout.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>布局原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/page.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>页面渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/coupling.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>联动原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/code-block.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>代码块</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/data-source.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>数据源</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/tmagic-ui.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>@tmagic/ui</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/tmagic-form.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>@tmagic/form</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-3ee04650><section class="VPSidebarItem level-0" data-v-3ee04650 data-v-e5415158><div class="item" role="button" tabindex="0" data-v-e5415158><div class="indicator" data-v-e5415158></div><h2 class="text" data-v-e5415158>教程</h2><!----></div><div class="items" data-v-e5415158><!--[--><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/" data-v-e5415158><!--[--><p class="text" data-v-e5415158>写在前面</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/hello-world.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>1.Hello World</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/runtime.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>2.Runtime</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-e5415158 data-v-e5415158><div class="item" data-v-e5415158><div class="indicator" data-v-e5415158></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/render.html" data-v-e5415158><!--[--><p class="text" data-v-e5415158>3.DSL解析渲染</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-743c5849 data-v-50d4c0f7><div class="VPDoc has-sidebar has-aside" data-v-50d4c0f7 data-v-ae9c3f5b><!--[--><!--]--><div class="container" data-v-ae9c3f5b><div class="aside" data-v-ae9c3f5b><div class="aside-curtain" data-v-ae9c3f5b></div><div class="aside-container" data-v-ae9c3f5b><div class="aside-content" data-v-ae9c3f5b><div class="VPDocAside" data-v-ae9c3f5b data-v-2b8c4a1b><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-2b8c4a1b data-v-63efc1e6><div class="content" data-v-63efc1e6><div class="outline-marker" data-v-63efc1e6></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-63efc1e6>On this page</div><ul class="VPDocOutlineItem root" data-v-63efc1e6 data-v-b3707799><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-2b8c4a1b></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-ae9c3f5b><div class="content-container" data-v-ae9c3f5b><!--[--><!--]--><main class="main" data-v-ae9c3f5b><div style="position:relative;" class="vp-doc _tmagic-editor_docs_guide_advanced_tmagic-form" data-v-ae9c3f5b><div><h1 id="tmagic-form" tabindex="-1">@tmagic/form <a class="header-anchor" href="#tmagic-form" aria-label="Permalink to &quot;@tmagic/form&quot;">​</a></h1><p>tmagic-editor的表单配置，核心就是使用了 @tmagic/form 来作为渲染器。@tmagic/form 是一个 npm 包，可以安装它，在你想使用的地方单独使用。</p><p>@tmagic/form 接受一个表单配置，详细配置可参考<a href="./../../api/form/form-props.html">表单 api</a>。</p><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to &quot;安装&quot;">​</a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;"># 最新稳定版</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @tmagic/form</span></span></code></pre></div><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">$</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> npm</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> install</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @tmagic/element-plus-adapter</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> @tmagic/design</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> element-plus</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> -S</span></span></code></pre></div><h2 id="快速上手" tabindex="-1">快速上手 <a class="header-anchor" href="#快速上手" aria-label="Permalink to &quot;快速上手&quot;">​</a></h2><p>本节将介绍如何在项目中使用 @tmagic/form</p><h3 id="引入-tmagic-form" tabindex="-1">引入 @tmagic/form <a class="header-anchor" href="#引入-tmagic-form" aria-label="Permalink to &quot;引入 @tmagic/form&quot;">​</a></h3><p>MagicForm 使用了 element-ui 库</p><p>在 main.js 中写入以下内容：</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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { createApp } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;vue&#39;</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;"> ElementPlus </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;element-plus&#39;</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;"> zhCn </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;element-plus/es/locale/lang/zh-cn&#39;</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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> TMagicDesign </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/design&#39;</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;"> MagicElementPlusAdapter </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/element-plus-adapter&#39;</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;"> MagicForm </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/form&#39;</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;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> App </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./App.vue&#39;</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;"> app</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> createApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(App);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(ElementPlus, {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> locale: zhCn,</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;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(TMagicDesign, MagicElementPlusAdapter);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">use</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(MagicForm);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">mount</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></code></pre></div><p>以上代码便完成了 @tmagic/form 的引入。需要注意的是，ElementUI 的样式文件需要单独引入。</p><p>在 App.Vue 中写入以下内容：</p><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;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form</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;">&quot;config&quot;</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;">&quot;initValue&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> export</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> data</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">() {</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;"> config: [</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;"> 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;"> name: </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;"> },</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;number&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;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;number&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;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;row&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;date&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;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;date&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;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;checkbox&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;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;checkbox&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;"> },</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;fieldset&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;fieldset&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> legend: </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;"> 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;select&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;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;select&quot;</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;">&quot;选项1&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">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;">&quot;选项2&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, value: </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;"> ],</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;"> initValue: {</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;"> number: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">10</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> fieldset: {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> select: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">1</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>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h3 id="开始使用" tabindex="-1">开始使用 <a class="header-anchor" href="#开始使用" aria-label="Permalink to &quot;开始使用&quot;">​</a></h3><p>至此，一个基于 Vue 和 @tmagic/form 的开发环境已经搭建完毕，现在就可以编写代码了。</p><h3 id="示例" tabindex="-1">示例 <a class="header-anchor" href="#示例" aria-label="Permalink to &quot;示例&quot;">​</a></h3><div class="demo-block demo-zh-CN}"><div class="source"><!--[--><!--]--><form class="el-form el-form--default el-form--label-right tmagic-design-form m-form" style="height:auto;"><!--[--><!--]--></form></div><div class="meta"><div class="description"><pre><code lass="language-javascript hljs">[
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;文本&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;text&quot;</span>
},
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;number&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;计数器&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;number&quot;</span>
},
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;row&quot;</span>,
<span class="hljs-attr">items</span>: [
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;date&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;日期&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;date&quot;</span>
},
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;checkbox&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;多选框&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;checkbox&quot;</span>
}
]
},
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;fieldset&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;fieldset&quot;</span>,
<span class="hljs-attr">legend</span>: <span class="hljs-string">&quot;分组&quot;</span>,
<span class="hljs-attr">items</span>: [
{
<span class="hljs-attr">type</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;下拉选项&quot;</span>,
<span class="hljs-attr">name</span>: <span class="hljs-string">&quot;select&quot;</span>,
<span class="hljs-attr">options</span>: [
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项1&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">1</span>
},
{
<span class="hljs-attr">text</span>: <span class="hljs-string">&quot;选项2&quot;</span>,
<span class="hljs-attr">value</span>: <span class="hljs-number">2</span>
}
]
}
]
}
]</code></pre></div><div class="highlight"><!--[--><!--]--></div></div><div class="demo-block-control"><i class="el-icon-caret-bottom"></i><span>显示配置</span><!--[--><button ariadisabled="false" type="button" class="el-button el-button--primary el-button--small is-text control-button el-tooltip__trigger" style=""><!--v-if--><span class=""><!--[-->查看结果<!--]--></span></button><!--teleport start--><!--teleport end--><!--]--></div><!--[--><div class="el-overlay el-modal-dialog" style="z-index:2077;display:none;"><!--[--><div role="dialog" aria-modal="true" aria-label="result" aria-describedby="el-id-5096-230" class="el-overlay-dialog" style=""><!--[--><!--]--></div><!--]--></div><!--]--></div></div></div></main><footer class="VPDocFooter" data-v-ae9c3f5b data-v-b7e03fe1><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-b7e03fe1><span class="visually-hidden" id="doc-footer-aria-label" data-v-b7e03fe1>Pager</span><div class="pager" data-v-b7e03fe1><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/guide/advanced/tmagic-ui.html" data-v-b7e03fe1><!--[--><span class="desc" data-v-b7e03fe1>Previous page</span><span class="title" data-v-b7e03fe1>@tmagic/ui</span><!--]--></a></div><div class="pager" data-v-b7e03fe1><a class="VPLink link pager-link next" href="/tmagic-editor/docs/guide/tutorial/" data-v-b7e03fe1><!--[--><span class="desc" data-v-b7e03fe1>Next page</span><span class="title" data-v-b7e03fe1>写在前面</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-743c5849 data-v-3622f5cc><div class="container" data-v-3622f5cc><p class="message" data-v-3622f5cc>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-3622f5cc>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_editor_codeblockservicemethods.md\":\"BX3_siEm\",\"api_editor_componentlistservicemethods.md\":\"CaiU5OMF\",\"api_editor_datasourceservicemethods.md\":\"CAoPyiGv\",\"api_editor_editorserviceevents.md\":\"gcFs85FS\",\"api_editor_editorservicemethods.md\":\"DKiiyoPz\",\"api_editor_events.md\":\"BykK47dJ\",\"api_editor_eventsservicemethods.md\":\"CQxboHVr\",\"api_editor_historyserviceevents.md\":\"B7KupcqD\",\"api_editor_historyservicemethods.md\":\"B4obX-T3\",\"api_editor_props.md\":\"DWCwb77u\",\"api_editor_propsserviceevents.md\":\"Bhooxxnn\",\"api_editor_propsservicemethods.md\":\"Bz1ljBiU\",\"api_editor_slots.md\":\"ChfXa7kw\",\"api_editor_storageservicemethods.md\":\"DDiOwi5a\",\"api_editor_uiservicemethods.md\":\"CpPtl7oI\",\"api_form_form-dialog-events.md\":\"BQrVPpPK\",\"api_form_form-dialog-methods.md\":\"DEL0Eh3K\",\"api_form_form-dialog-props.md\":\"BlahsoDf\",\"api_form_form-events.md\":\"CgPQ3xhz\",\"api_form_form-methods.md\":\"DVzlGQIE\",\"api_form_form-props.md\":\"B_-pPs7j\",\"api_stage_coreevents.md\":\"BJgI_eWC\",\"api_stage_coremethods.md\":\"cDBiJupB\",\"api_table_events.md\":\"uY2Q6YZ2\",\"api_table_methods.md\":\"QkOCzJ6I\",\"api_table_props.md\":\"_WrWithq\",\"form-config_compare.md\":\"CxuguNFe\",\"form-config_editor-fields_code-link.md\":\"BKQqDQ-o\",\"form-config_editor-fields_code-select-col.md\":\"CAXo8Gdo\",\"form-config_editor-fields_code-select.md\":\"CYk7LEMU\",\"form-config_editor-fields_code.md\":\"DGnHcYO9\",\"form-config_editor-fields_cond-op-select.md\":\"DRTJ6abx\",\"form-config_editor-fields_data-source-field-select.md\":\"DR1kwf8H\",\"form-config_editor-fields_data-source-fields.md\":\"CnEqKG3I\",\"form-config_editor-fields_data-source-input.md\":\"YD9_hjaD\",\"form-config_editor-fields_data-source-method-select.md\":\"CsGjsRpB\",\"form-config_editor-fields_data-source-methods.md\":\"DA7qZPCv\",\"form-config_editor-fields_data-source-mocks.md\":\"C_py-HVd\",\"form-config_editor-fields_data-source-select.md\":\"0BjjDcvd\",\"form-config_editor-fields_display-conds.md\":\"DAg2DaL-\",\"form-config_editor-fields_event-select.md\":\"BV3lJb_r\",\"form-config_editor-fields_key-value.md\":\"COo3lmAD\",\"form-config_editor-fields_page-fragment-select.md\":\"BCMgnfOv\",\"form-config_editor-fields_ui-select.md\":\"D0tX04T2\",\"form-config_fields_cascader.md\":\"C0c0NFLI\",\"form-config_fields_checkbox.md\":\"BLrH5nrH\",\"form-config_fields_color-picker.md\":\"bjDdQpvY\",\"form-config_fields_date-picker.md\":\"CPNFs5b5\",\"form-config_fields_daterange-picker.md\":\"Db24ADad\",\"form-config_fields_datetime-picker.md\":\"Cx2bLmNB\",\"form-config_fields_display.md\":\"BaiQUX7K\",\"form-config_fields_dynamic-field.md\":\"pj2jVJDM\",\"form-config_fields_hidden.md\":\"CY0o0qcd\",\"form-config_fields_link.md\":\"BO3PrLPD\",\"form-config_fields_number-range.md\":\"BjTrt9wC\",\"form-config_fields_number.md\":\"c76O_OEh\",\"form-config_fields_radio.md\":\"DDDbGnrf\",\"form-config_fields_select.md\":\"D-hxYaPx\",\"form-config_fields_switch.md\":\"DRJauj9b\",\"form-config_fields_text.md\":\"nfBZO4U6\",\"form-config_fields_textarea.md\":\"BytSbPPK\",\"form-config_fields_time-picker.md\":\"Cqzj5cz_\",\"form-config_fields_timerange-picker.md\":\"Bjottjin\",\"form-config_layout.md\":\"DgWujzt6\",\"form-config_relate.md\":\"D4BEna2n\",\"guide_advanced_code-block.md\":\"B8iGTN8d\",\"guide_advanced_coupling.md\":\"Ch5QsuoK\",\"guide_advanced_data-source.md\":\"DG0DsdJV\",\"guide_advanced_js-schema.md\":\"HvE43RGl\",\"guide_advanced_layout.md\":\"B3q7H8Pu\",\"guide_advanced_page.md\":\"Db2dMbH0\",\"guide_advanced_tmagic-form.md\":\"Ctv1XIF5\",\"guide_advanced_tmagic-ui.md\":\"BKuDBLIF\",\"guide_component.md\":\"9ynlkeYM\",\"guide_conception.md\":\"BPjbVwPx\",\"guide_editor-expand.md\":\"hu4ukQA2\",\"guide_index.md\":\"DgK8xejF\",\"guide_introduction.md\":\"CTlEAu5R\",\"guide_migration.md\":\"DF5WlNCT\",\"guide_publish.md\":\"BxM8UPuD\",\"guide_runtime.md\":\"BGV1Aw8_\",\"guide_tutorial_hello-world.md\":\"BwBB0sLQ\",\"guide_tutorial_index.md\":\"DeQI3m9W\",\"guide_tutorial_render.md\":\"CmB0S1C1\",\"guide_tutorial_runtime.md\":\"DZf5WVK6\",\"index.md\":\"_vBFVjCB\",\"runtime-api_core_app.md\":\"DqL_SMIi\",\"runtime-api_core_devtoolapi.md\":\"CNtmpnLO\",\"runtime-api_core_env.md\":\"DqthtvNq\",\"runtime-api_core_eventhelper.md\":\"DSOQlxIA\",\"runtime-api_core_flowstate.md\":\"DKodDYkQ\",\"runtime-api_core_iteratorcontainer.md\":\"yxAfk3wp\",\"runtime-api_core_node.md\":\"DfHI9knW\",\"runtime-api_core_page.md\":\"DbP_ghoD\",\"runtime-api_core_utils.md\":\"D61lvGXB\",\"runtime-api_data-source_datasource.md\":\"D_vEMdmL\",\"runtime-api_data-source_datasourcemanager.md\":\"B7SYphFJ\",\"runtime-api_data-source_httpdatasource.md\":\"Db7JVpGX\",\"runtime-api_data-source_observeddata.md\":\"gzo1dIjG\",\"runtime-api_data-source_utils.md\":\"DeJn6r5b\"}");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\":\"Editor API\",\"link\":\"/api/editor/props\",\"activeMatch\":\"/api/\"},{\"text\":\"Runtime API\",\"link\":\"/runtime-api/core/app\",\"activeMatch\":\"/runtime-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\":\"RUNTIME\",\"link\":\"/guide/runtime.md\"},{\"text\":\"组件开发\",\"link\":\"/guide/component.md\"},{\"text\":\"基础概念\",\"link\":\"/guide/conception.md\"},{\"text\":\"页面发布\",\"link\":\"/guide/publish.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\":\"NumberRange数字范围\",\"link\":\"/form-config/fields/number-range.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\":\"DateRangePick日期范围选择器\",\"link\":\"/form-config/fields/daterange-picker.md\"},{\"text\":\"DatetimePick日期时间选择器\",\"link\":\"/form-config/fields/datetime-picker.md\"},{\"text\":\"TimePick时间选择器\",\"link\":\"/form-config/fields/time-picker.md\"},{\"text\":\"TimeRangePick时间范围选择器\",\"link\":\"/form-config/fields/timerange-picker.md\"},{\"text\":\"DynamicField动态表单\",\"link\":\"/form-config/fields/dynamic-field.md\"}]},{\"text\":\"编辑器中可用配置\",\"items\":[{\"text\":\"Code代码编辑器\",\"link\":\"/form-config/editor-fields/code.md\"},{\"text\":\"CodeLink代码链接\",\"link\":\"/form-config/editor-fields/code-link.md\"},{\"text\":\"CodeSelect代码块选择器\",\"link\":\"/form-config/editor-fields/code-select.md\"},{\"text\":\"CodeSelectCol代码块选择列\",\"link\":\"/form-config/editor-fields/code-select-col.md\"},{\"text\":\"DataSourceSelect数据源选择器\",\"link\":\"/form-config/editor-fields/data-source-select.md\"},{\"text\":\"DataSourceFieldSelect数据源字段选择器\",\"link\":\"/form-config/editor-fields/data-source-field-select.md\"},{\"text\":\"DataSourceMethodSelect数据源方法选择器\",\"link\":\"/form-config/editor-fields/data-source-method-select.md\"},{\"text\":\"DataSourceFields数据源字段配置\",\"link\":\"/form-config/editor-fields/data-source-fields.md\"},{\"text\":\"DataSourceInput数据源输入框\",\"link\":\"/form-config/editor-fields/data-source-input.md\"},{\"text\":\"DataSourceMethods数据源方法配置\",\"link\":\"/form-config/editor-fields/data-source-methods.md\"},{\"text\":\"DataSourceMocks数据源Mock配置\",\"link\":\"/form-config/editor-fields/data-source-mocks.md\"},{\"text\":\"UISelect组件选择器\",\"link\":\"/form-config/editor-fields/ui-select.md\"},{\"text\":\"KeyValue键值对\",\"link\":\"/form-config/editor-fields/key-value.md\"},{\"text\":\"PageFragmentSelect页面片选择器\",\"link\":\"/form-config/editor-fields/page-fragment-select.md\"},{\"text\":\"EventSelect事件选择器\",\"link\":\"/form-config/editor-fields/event-select.md\"},{\"text\":\"DisplayConds显示条件配置\",\"link\":\"/form-config/editor-fields/display-conds.md\"},{\"text\":\"CondOpSelect条件操作选择器\",\"link\":\"/form-config/editor-fields/cond-op-select.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\"}]}],\"/runtime-api/\":[{\"text\":\"@tmagic/core\",\"items\":[{\"text\":\"App\",\"link\":\"/runtime-api/core/app\"},{\"text\":\"Node\",\"link\":\"/runtime-api/core/node\"},{\"text\":\"Page\",\"link\":\"/runtime-api/core/page\"},{\"text\":\"EventHelper\",\"link\":\"/runtime-api/core/eventHelper\"},{\"text\":\"Env\",\"link\":\"/runtime-api/core/env\"},{\"text\":\"IteratorContainer\",\"link\":\"/runtime-api/core/iteratorContainer\"},{\"text\":\"FlowState\",\"link\":\"/runtime-api/core/flowState\"},{\"text\":\"DevtoolApi\",\"link\":\"/runtime-api/core/devtoolApi\"},{\"text\":\"工具函数\",\"link\":\"/runtime-api/core/utils\"}]},{\"text\":\"@tmagic/data-source\",\"items\":[{\"text\":\"DataSourceManager\",\"link\":\"/runtime-api/data-source/dataSourceManager\"},{\"text\":\"DataSource\",\"link\":\"/runtime-api/data-source/dataSource\"},{\"text\":\"HttpDataSource\",\"link\":\"/runtime-api/data-source/httpDataSource\"},{\"text\":\"观察者数据类\",\"link\":\"/runtime-api/data-source/observedData\"},{\"text\":\"工具函数\",\"link\":\"/runtime-api/data-source/utils\"}]}]}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink