github/tmagic-editor
1
0
Fork 0
mirror of https://github.com/Tencent/tmagic-editor.git synced 2026-07-26 16:08:10 +00:00
Code Issues Packages Projects Releases Wiki Activity
tmagic-editor/docs/guide/component.html
github-actions[bot] b62566deb6 Deploy to GitHub pages
2026-07-24 09:39:36 +00:00

124 lines
64 KiB
HTML
Raw Permalink 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-editor</title>
<meta name="description" content="页面可视化平台">
<meta name="generator" content="VitePress v2.0.0-alpha.18">
<link rel="preload stylesheet" href="/tmagic-editor/docs/assets/style.Ch7UhAWw.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.C4PDWoQ9.js"></script>
<link rel="preload" href="/tmagic-editor/docs/assets/inter-roman-latin.Cy4MYw_J.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/theme.DjefmpVa.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/chunks/framework.ECw2lWOt.js">
<link rel="modulepreload" href="/tmagic-editor/docs/assets/guide_component.md.CHxd4qA-.lean.js">
<meta name="theme-color" content="#646cff">
<script id="check-dark-mode">(()=>{let e=localStorage.getItem(`vitepress-theme-appearance`)||`auto`,t=window.matchMedia(`(prefers-color-scheme: dark)`).matches;(!e||e===`auto`?t: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-2932c6cf><!--[--><!--]--><!--[--><span tabindex="-1" data-v-f9a479f9></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-f9a479f9>Skip to content</a><!--]--><!----><header class="VPNav" data-v-2932c6cf data-v-5ec118a8><div class="VPNavBar has-sidebar top" data-v-5ec118a8 data-v-cd6df6d0><div class="wrapper" data-v-cd6df6d0><div class="container" data-v-cd6df6d0><div class="title" data-v-cd6df6d0><div class="VPNavBarTitle has-sidebar" data-v-cd6df6d0 data-v-22741a41><a class="title" href="/tmagic-editor/docs/" data-v-22741a41><!--[--><!--]--><!--[--><img class="VPImage logo" src="./favicon.png" alt data-v-4582fcab><!--]--><span data-v-22741a41>tmagic-editor</span><!--[--><!--]--></a></div></div><div class="content" data-v-cd6df6d0><div class="content-body" data-v-cd6df6d0><!--[--><!--]--><div class="VPNavBarSearch search" data-v-cd6df6d0 data-v-8cc82bae><!--[--><button type="button" class="VPNavBarSearchButton" aria-label="Search" aria-keyshortcuts="/ control+k meta+k" data-v-8cc82bae data-v-e341e05d><span class="vpi-search" aria-hidden="true" data-v-e341e05d></span><span class="text" data-v-e341e05d>Search</span><span class="keys" aria-hidden="true" data-v-e341e05d><kbd class="key-cmd" data-v-e341e05d>⌘</kbd><kbd class="key-ctrl" data-v-e341e05d>Ctrl</kbd><kbd data-v-e341e05d>K</kbd></span></button><!----><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-cd6df6d0 data-v-2cceaaa0><span id="main-nav-aria-label" class="visually-hidden" data-v-2cceaaa0> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/tmagic-editor/docs/guide/" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>文档</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/api/editor/props.html" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>Editor API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/runtime-api/core/app.html" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>Runtime API</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/tmagic-editor/docs/form-config/fields/text.html" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>表单配置</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://github.com/Tencent/tmagic-editor/releases" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>更新日志</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://tencent.github.io/tmagic-editor/playground/index.html" tabindex="0" data-v-2cceaaa0 data-v-1f52e8ac><!--[--><span data-v-1f52e8ac>Playground</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-cd6df6d0 data-v-11250d7e><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-11250d7e data-v-a274f63d data-v-091ddd52><span class="check" data-v-091ddd52><span class="icon" data-v-091ddd52><!--[--><span class="vpi-sun sun" data-v-a274f63d></span><span class="vpi-moon moon" data-v-a274f63d></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-cd6df6d0 data-v-67340789 data-v-882b9947><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-882b9947 data-v-3899771d><span class="vpi-social-github"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-cd6df6d0 data-v-ec4151bd data-v-8c70178b><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-8c70178b><span class="vpi-more-horizontal icon" data-v-8c70178b></span></button><div class="menu" data-v-8c70178b><div class="VPMenu" data-v-8c70178b data-v-d3c72699><!----><!--[--><!--[--><!----><div class="group" data-v-ec4151bd><div class="item appearance" data-v-ec4151bd><p class="label" data-v-ec4151bd>Appearance</p><div class="appearance-action" data-v-ec4151bd><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-ec4151bd data-v-a274f63d data-v-091ddd52><span class="check" data-v-091ddd52><span class="icon" data-v-091ddd52><!--[--><span class="vpi-sun sun" data-v-a274f63d></span><span class="vpi-moon moon" data-v-a274f63d></span><!--]--></span></span></button></div></div></div><div class="group" data-v-ec4151bd><div class="item social-links" data-v-ec4151bd><div class="VPSocialLinks social-links-list" data-v-ec4151bd data-v-882b9947><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Tencent/tmagic-editor" aria-label="github" target="_blank" rel="me noopener" data-v-882b9947 data-v-3899771d><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-cd6df6d0 data-v-baa7e450><span class="container" data-v-baa7e450><span class="top" data-v-baa7e450></span><span class="middle" data-v-baa7e450></span><span class="bottom" data-v-baa7e450></span></span></button></div></div></div></div><div class="divider" data-v-cd6df6d0><div class="divider-line" data-v-cd6df6d0></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-2932c6cf data-v-1c5126ae><div class="container" data-v-1c5126ae><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-1c5126ae><span class="vpi-align-left menu-icon" data-v-1c5126ae></span><span class="menu-text" data-v-1c5126ae>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-1c5126ae data-v-dd68c105><button data-v-dd68c105>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-2932c6cf data-v-42fb1f13><div class="curtain" data-v-42fb1f13></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-42fb1f13><span class="visually-hidden" id="sidebar-aria-label" data-v-42fb1f13> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-debffcca><section class="VPSidebarItem level-0 has-active" data-v-debffcca data-v-0f69b1fe><div class="item" role="button" tabindex="0" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><h2 class="text" data-v-0f69b1fe>文档</h2><!----></div><div class="items" data-v-0f69b1fe><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/introduction.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>介绍</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>快速开始</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/runtime.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>RUNTIME</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/component.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>组件开发</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/conception.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>基础概念</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/publish.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>页面发布</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/editor-expand.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>编辑器扩展</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/migration.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>升级到1.5.x</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-debffcca><section class="VPSidebarItem level-0" data-v-debffcca data-v-0f69b1fe><div class="item" role="button" tabindex="0" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><h2 class="text" data-v-0f69b1fe>进阶指南</h2><!----></div><div class="items" data-v-0f69b1fe><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/js-schema.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>JS Schema</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/layout.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>布局原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/page.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>页面渲染</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/coupling.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>联动原理</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/code-block.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>代码块</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/data-source.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>数据源</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/history-list.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>历史记录面板</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/tmagic-form.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>@tmagic/form</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/advanced/prop-form-validate.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>属性配置表单校验联动</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-debffcca><section class="VPSidebarItem level-0" data-v-debffcca data-v-0f69b1fe><div class="item" role="button" tabindex="0" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><h2 class="text" data-v-0f69b1fe>教程</h2><!----></div><div class="items" data-v-0f69b1fe><!--[--><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>写在前面</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/hello-world.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>1.Hello World</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/runtime.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>2.Runtime</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-0f69b1fe><div class="item" data-v-0f69b1fe><div class="indicator" data-v-0f69b1fe></div><a class="VPLink link link" href="/tmagic-editor/docs/guide/tutorial/render.html" data-v-0f69b1fe><!--[--><p class="text" data-v-0f69b1fe>3.DSL解析渲染</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-2932c6cf data-v-58117d44><div class="VPDoc has-sidebar has-aside" data-v-58117d44 data-v-6fc6448d><!--[--><!--]--><div class="container" data-v-6fc6448d><div class="aside" data-v-6fc6448d><div class="aside-curtain" data-v-6fc6448d></div><div class="aside-container" data-v-6fc6448d><div class="aside-content" data-v-6fc6448d><div class="VPDocAside" data-v-6fc6448d data-v-9ea761ae><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-9ea761ae data-v-d5e90846><div class="content" data-v-d5e90846><div class="outline-marker" data-v-d5e90846></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-d5e90846>On this page</div><ul class="VPDocOutlineItem root" data-v-d5e90846 data-v-c55a35f3><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-9ea761ae></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-6fc6448d><div class="content-container" data-v-6fc6448d><!--[--><!--]--><main class="main" data-v-6fc6448d><div style="position:relative;" class="vp-doc _tmagic-editor_docs_guide_component" data-v-6fc6448d><div><h1 id="如何开发一个组件" tabindex="-1">如何开发一个组件 <a class="header-anchor" href="#如何开发一个组件" aria-label="Permalink to “如何开发一个组件”">​</a></h1><p>tmagic-editor支持业务方进行自定义组件开发。在tmagic-editor中，组件是以 npm 包形式存在的，组件和插件只要按照规范开发，就可以在tmagic-editor的 runtime 中被加入并正确渲染组件。</p><h3 id="组件规范" tabindex="-1">组件规范 <a class="header-anchor" href="#组件规范" aria-label="Permalink to “组件规范”">​</a></h3><p>组件的基础形式，需要有四个文件</p><ul><li>index 入口文件，引入下面几个文件</li><li>form-config 表单配置描述</li><li>init-value 表单初始值</li><li>event 定义联动事件，具体可以参考<a href="./../guide/advanced/coupling.html#组件联动">组件联动</a></li><li>component.{vue,jsx} 组件样式、逻辑代码</li></ul><h3 id="_1-创建组件" tabindex="-1">1. 创建组件 <a class="header-anchor" href="#_1-创建组件" aria-label="Permalink to “1. 创建组件”">​</a></h3><p>可以使用<code>npm create tmagic</code> 选择 <code>components:组件库(组件/插件/数据源)</code> 来快速创建一个组件库。</p><p>然后继续使用<code>npm create tmagic</code> 选择 <code>component:组件</code> 来快速创建一个组件。</p><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>组件库并不是必须，组件如何管理可以根据具体情况来选择。直接放到 runtime 目录中也是一个不错的选择，如果选择放到runtime中可以在runtime中的package.json添加</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;createTmagic&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;componentsPath&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./components&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;pluginsPath&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./plugins&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;dataSourcesPath&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;./dataSources&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></code></pre></div><p>来指定组件库的路径。这样在使用<code>npm create tmagic</code> 来创建组件时，会自动将组件添加到组件库中。</p></div><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>如需为组件添加npm scope name，可以在runtime中的package.json中添加</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;createTmagic&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;npmScopeName&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;@tmagic&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></code></pre></div></div><p>手动创建组件，可以在项目中，如 runtime 目录中，创建一个名为 test-component 的组件目录，其中包含上面四个规范文件。</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// index.js</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// vue</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Test </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./Test.vue&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// react </span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Test </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./Test.tsx&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">default</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> config } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./form-config&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">default</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> as</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;./init-value&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Test;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>如果在runtime中使用了@tmagic/cli，则必须保持此规范；不使用则可以自由书写。</p></div><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// form-config.js</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> default</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;">&#39;select&#39;</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;">&#39;字体颜色&#39;</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;">&#39;color&#39;</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;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;红色字体&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;red&#39;</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;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;蓝色字体&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> value: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;blue&#39;</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;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;text&#39;</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;">&#39;配置文案&#39;</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></code></pre></div><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>配置内容必须是一个数组，每个元素是一个对象，包含 type、text、name 等属性，每个对象代表一个表单项。</p><p>type 是表单项的类型</p><p>text 是表单项的文本</p><p>name 是表单项值的key。</p><p>上述实例对应生成的值为</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;color&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;red&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> &quot;text&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </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></code></pre></div><p>type 在@tmagic/form 和 @tmagic/editor 中默认提供了一些，@tmagic/form提供的可以前往<a href="/tmagic-editor/docs/form-config/fields/text.html">表单配置</a>查看。</p></div><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// init-value.js</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> color: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;red&#39;</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;">&#39;一段文字&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">};</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>在编辑器中添加组件时使用，作为初始值。</p></div><p>Vue版本的组件代码示例</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">&lt;!-- Test.vue --&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;this is a Test component:&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ color: config.color }&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ config.text }}&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">template</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:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> setup</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineOptions</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;">&#39;magic-ui-test&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">});</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">defineProps</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;"> type: Object,</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: () </span><span style="--shiki-light:#c62739;--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;"> },</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:#11782a;--shiki-dark:#85E89D;">script</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>编辑器中配置的 config 对象，会作为 props 传入组件中。</p></div><p>react 版本组件代码示例</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// Test.tsx</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> React, { useContext } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;react&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Core </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/core&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { AppContent } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/react-runtime-help&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> Test</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">config</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> any</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> app</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> useContext</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">Core</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> |</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> undefined</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;(AppContent);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(app)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> return</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (&lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> id</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{config.id}</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{app.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">transformStyle</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(config.style </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">||</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {})}&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;this is a Test component:&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">{ { color: config.color }}&gt;{ config.text }&lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">span</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#11782a;--shiki-dark:#85E89D;">div</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> Test;</span></span></code></pre></div><h2 id="插件开发" tabindex="-1">插件开发 <a class="header-anchor" href="#插件开发" aria-label="Permalink to “插件开发”">​</a></h2><p>插件开发和组件开发形式类似，但是插件开发不需要有组件的规范。</p><p>我们只需要在插件中提供一个入口文件。插件需要提供一个 install 方法。</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 在Vue的runtime中</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--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;"> install</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">vueApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, { </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">tmagicApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;">// 在React的runtime中</span></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--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;"> install</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({ </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">app</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#c13617;--shiki-dark:#FFAB70;">tmagicApp</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }) {}</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p>在插件中开发者可以自由实现需要的业务逻辑。</p><h2 id="集成到runtime中" tabindex="-1">集成到runtime中 <a class="header-anchor" href="#集成到runtime中" aria-label="Permalink to “集成到runtime中”">​</a></h2><h3 id="使用-tmagic-cli" tabindex="-1">使用@tmagic/cli <a class="header-anchor" href="#使用-tmagic-cli" aria-label="Permalink to “使用@tmagic/cli”">​</a></h3><p>在使用<code>npm create tmagic</code> 创建的runtime中，自动集成了@tmagic/cli，将组件集成到此runtime中只需要在<code>tmagic.config.ts</code>中的packages字段中添加</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark" style="--shiki-light:#24292e;--shiki-dark:#e1e4e8;--shiki-light-bg:#fff;--shiki-dark-bg:#24292e;" tabindex="0" dir="ltr"><code><span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { defineConfig } </span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;@tmagic/cli&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#c62739;--shiki-dark:#F97583;">export</span><span style="--shiki-light:#c62739;--shiki-dark:#F97583;"> default</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> defineConfig</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">({</span></span>
<span class="line"><span style="--shiki-light:#62687b;--shiki-dark:#818e99;"> // other config</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> packages: [</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;组件type&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;组件目录或者npm包名&#39;</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></code></pre></div><div class="tip custom-block"><p class="custom-block-title custom-block-title-default">TIP</p><p>组件type需要与<a href="./../api/editor/props.html#componentgrouplist">componentGroupList</a>中的type对应。</p></div><p>配置到packages字段中后，执行<code>npm run tmagic</code>来创建组件库的入口文件。</p><p>然后使用<code>npm run build:libs</code>命令来构建用于编辑器中的组件配置、组件初始值、组件事件联动的资源文件。</p></div></div></main><footer class="VPDocFooter" data-v-6fc6448d data-v-caf0f700><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-caf0f700><span class="visually-hidden" id="doc-footer-aria-label" data-v-caf0f700>Pager</span><div class="pager" data-v-caf0f700><a class="VPLink link pager-link prev" href="/tmagic-editor/docs/guide/runtime.html" data-v-caf0f700><!--[--><span class="desc" data-v-caf0f700>Previous page</span><span class="title" data-v-caf0f700>RUNTIME</span><!--]--></a></div><div class="pager" data-v-caf0f700><a class="VPLink link pager-link next" href="/tmagic-editor/docs/guide/conception.html" data-v-caf0f700><!--[--><span class="desc" data-v-caf0f700>Next page</span><span class="title" data-v-caf0f700>基础概念</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-2932c6cf data-v-53df1d78><div class="container" data-v-53df1d78><p class="message" data-v-53df1d78>Powered by 腾讯视频会员平台技术中心</p><p class="copyright" data-v-53df1d78>Copyright (C) 2025 Tencent.</p></div></footer><!--[--><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api_editor_codeblockservicemethods.md\":\"B0JWNSG9\",\"api_editor_componentlistservicemethods.md\":\"CBP2S7wE\",\"api_editor_datasourceservicemethods.md\":\"Dqsgtsza\",\"api_editor_editorserviceevents.md\":\"D8xRN9za\",\"api_editor_editorservicemethods.md\":\"Bk-06sWx\",\"api_editor_events.md\":\"BRiMzDnt\",\"api_editor_eventsservicemethods.md\":\"dwupZk8N\",\"api_editor_historyserviceevents.md\":\"BtP81g1-\",\"api_editor_historyservicemethods.md\":\"BjNQp3OU\",\"api_editor_props.md\":\"BhoqoNOV\",\"api_editor_propsserviceevents.md\":\"Buhcztd1\",\"api_editor_propsservicemethods.md\":\"BzKNuOaj\",\"api_editor_slots.md\":\"CM6xNMn8\",\"api_editor_storageservicemethods.md\":\"efkyIGFc\",\"api_editor_uiserviceevents.md\":\"0dV3tgwH\",\"api_editor_uiservicemethods.md\":\"BYnnqy4l\",\"api_form_form-dialog-events.md\":\"uk6NOP07\",\"api_form_form-dialog-methods.md\":\"B6jmcnJU\",\"api_form_form-dialog-props.md\":\"bOkTzdnl\",\"api_form_form-events.md\":\"DMpt-Smk\",\"api_form_form-methods.md\":\"DwT7cEhd\",\"api_form_form-props.md\":\"Dg-76p7a\",\"api_form_submit-form.md\":\"nS0JshyL\",\"api_stage_coreevents.md\":\"Bf0PhKAQ\",\"api_stage_coremethods.md\":\"BfJ-Bzds\",\"api_table_events.md\":\"CmdGltTm\",\"api_table_methods.md\":\"CDy1hOhW\",\"api_table_props.md\":\"D0XbY-XC\",\"form-config_compare.md\":\"BZ2qHWJP\",\"form-config_editor-fields_code-link.md\":\"BpuuSraL\",\"form-config_editor-fields_code-select-col.md\":\"C54C6HBq\",\"form-config_editor-fields_code-select.md\":\"CdTMmJRk\",\"form-config_editor-fields_code.md\":\"DBDZ9aIQ\",\"form-config_editor-fields_cond-op-select.md\":\"0vX39ttH\",\"form-config_editor-fields_data-source-field-select.md\":\"-jRdW6U6\",\"form-config_editor-fields_data-source-fields.md\":\"CO7fjwNI\",\"form-config_editor-fields_data-source-input.md\":\"DpgkSVzn\",\"form-config_editor-fields_data-source-method-select.md\":\"CjX7GYAV\",\"form-config_editor-fields_data-source-methods.md\":\"YdiUw-3k\",\"form-config_editor-fields_data-source-mocks.md\":\"D3UjxvJ1\",\"form-config_editor-fields_data-source-select.md\":\"CF-Bi9Rd\",\"form-config_editor-fields_display-conds.md\":\"QPsgn3i7\",\"form-config_editor-fields_event-select.md\":\"O34LrrHB\",\"form-config_editor-fields_key-value.md\":\"PMq3b0FT\",\"form-config_editor-fields_page-fragment-select.md\":\"D3CJRip6\",\"form-config_editor-fields_ui-select.md\":\"BgtJ5AxZ\",\"form-config_fields_cascader.md\":\"DhJC40cS\",\"form-config_fields_checkbox.md\":\"nvv9BCrN\",\"form-config_fields_color-picker.md\":\"D31BXkuH\",\"form-config_fields_date-picker.md\":\"C0Jc2sM4\",\"form-config_fields_daterange-picker.md\":\"hZiPs5Uv\",\"form-config_fields_datetime-picker.md\":\"BAb8t3p_\",\"form-config_fields_display.md\":\"CwHJEg6e\",\"form-config_fields_dynamic-field.md\":\"1EuSDWFw\",\"form-config_fields_hidden.md\":\"kjCPK54I\",\"form-config_fields_link.md\":\"JBng1KBn\",\"form-config_fields_number-range.md\":\"pk4oxFSa\",\"form-config_fields_number.md\":\"B-L5x_DS\",\"form-config_fields_radio.md\":\"DQIt8zrV\",\"form-config_fields_select.md\":\"CvxobLp8\",\"form-config_fields_switch.md\":\"CaohlziY\",\"form-config_fields_text.md\":\"-xxYJ1yb\",\"form-config_fields_textarea.md\":\"JLm1vGhr\",\"form-config_fields_time-picker.md\":\"B0kEAtsi\",\"form-config_fields_timerange-picker.md\":\"BBWsAvYr\",\"form-config_layout.md\":\"BouY35z0\",\"form-config_relate.md\":\"QHBTFWrk\",\"form-config_rules.md\":\"BLmymsyx\",\"guide_advanced_code-block.md\":\"DzhFxdMX\",\"guide_advanced_coupling.md\":\"B_NEBwJV\",\"guide_advanced_data-source.md\":\"R6g6a5Js\",\"guide_advanced_history-list.md\":\"Dp7f-5wV\",\"guide_advanced_js-schema.md\":\"DURcb0gD\",\"guide_advanced_layout.md\":\"DfLeWfj5\",\"guide_advanced_page.md\":\"DZRwYmIT\",\"guide_advanced_prop-form-validate.md\":\"CfZaPKFi\",\"guide_advanced_tmagic-form.md\":\"BhAymOm7\",\"guide_component.md\":\"CHxd4qA-\",\"guide_conception.md\":\"r6YOd1Lq\",\"guide_editor-expand.md\":\"DGPm3bVd\",\"guide_index.md\":\"DHab0YEy\",\"guide_introduction.md\":\"Bs_e3Azr\",\"guide_migration.md\":\"GpzxeUHU\",\"guide_publish.md\":\"nlian04d\",\"guide_runtime.md\":\"C48c370I\",\"guide_tutorial_hello-world.md\":\"DY2j4gMO\",\"guide_tutorial_index.md\":\"DgGlEUue\",\"guide_tutorial_render.md\":\"Cp6KvBb3\",\"guide_tutorial_runtime.md\":\"B7CmcXE9\",\"index.md\":\"9RsHeZYQ\",\"runtime-api_core_app.md\":\"Dur674t2\",\"runtime-api_core_devtoolapi.md\":\"C1wqlpj3\",\"runtime-api_core_env.md\":\"wgvhhZGD\",\"runtime-api_core_eventhelper.md\":\"BcVTf8du\",\"runtime-api_core_flowstate.md\":\"Bd39Dl4m\",\"runtime-api_core_iteratorcontainer.md\":\"BjjzJUgF\",\"runtime-api_core_node.md\":\"DpKm8jlu\",\"runtime-api_core_page.md\":\"aMeRWFmG\",\"runtime-api_core_utils.md\":\"BNL-iA4H\",\"runtime-api_data-source_datasource.md\":\"CTrOiEBp\",\"runtime-api_data-source_datasourcemanager.md\":\"B0C4k-Pw\",\"runtime-api_data-source_httpdatasource.md\":\"C2nCaEQ4\",\"runtime-api_data-source_observeddata.md\":\"XXpQQO8h\",\"runtime-api_data-source_utils.md\":\"BeoHBz0Y\"}");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\":\"历史记录面板\",\"link\":\"/guide/advanced/history-list.md\"},{\"text\":\"@tmagic/form\",\"link\":\"/guide/advanced/tmagic-form.md\"},{\"text\":\"属性配置表单校验联动\",\"link\":\"/guide/advanced/prop-form-validate.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\",\"items\":[{\"text\":\"方法\",\"link\":\"/api/editor/uiServiceMethods.md\"},{\"text\":\"事件\",\"link\":\"/api/editor/uiServiceEvents.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\":\"submitForm\",\"link\":\"/api/form/submit-form\"}]}]},{\"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/rules.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\":{},\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink