tmagic-editor/docs/assets/api_form_form-props.md.BuujGPjG.js
2025-03-31 12:39:00 +00:00

31 lines
12 KiB
JavaScript
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.

import{aw as i,y as a,z as l,b0 as n}from"./chunks/framework.BCBheFgR.js";const g=JSON.parse('{"title":"Form组件属性 props","description":"","frontmatter":{},"headers":[],"relativePath":"api/form/form-props.md","filePath":"api/form/form-props.md"}'),t={name:"api/form/form-props.md"};function p(e,s,h,r,k,o){return l(),a("div",null,s[0]||(s[0]=[n(`<h1 id="form组件属性-props" tabindex="-1">Form组件属性 props <a class="header-anchor" href="#form组件属性-props" aria-label="Permalink to &quot;Form组件属性 props&quot;"></a></h1><h2 id="config" tabindex="-1">config <a class="header-anchor" href="#config" aria-label="Permalink to &quot;config&quot;"></a></h2><ul><li><p><strong>详情:</strong> 表单配置</p></li><li><p><strong>默认值:</strong> <code>[]</code></p></li><li><p><strong>类型:</strong> <a href="https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706" target="_blank" rel="noreferrer">FormConfig</a></p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--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:#22863A;--shiki-dark:#85E89D;">m-form-dialog</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :config</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;config&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form-dialog</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:#22863A;--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:#22863A;--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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;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;"> config</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#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>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> name: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;multiple&#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;"> type: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;switch&#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;">&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><h2 id="initvalues" tabindex="-1">initValues <a class="header-anchor" href="#initvalues" aria-label="Permalink to &quot;initValues&quot;"></a></h2><ul><li><p><strong>详情:</strong> 表单初始化值</p></li><li><p><strong>默认值:</strong> <code>{}</code></p></li><li><p><strong>类型:</strong> <code>Object</code></p></li><li><p><strong>示例:</strong></p></li></ul><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--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:#22863A;--shiki-dark:#85E89D;">m-form-dialog</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :init-values</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;initValues&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">m-form-dialog</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:#22863A;--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:#22863A;--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:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { ref } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;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;"> initValues</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> text: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#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;"> multiply: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">]);</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&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><h2 id="labelwidth" tabindex="-1">labelWidth <a class="header-anchor" href="#labelwidth" aria-label="Permalink to &quot;labelWidth&quot;"></a></h2><ul><li><strong>详情:</strong></li></ul><p>表单域标签的宽度,例如 &#39;50px&#39;。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto</p><ul><li><p><strong>默认值:</strong> <code>&#39;200px&#39;</code></p></li><li><p><strong>类型:</strong> <code>string | number</code></p></li></ul><h2 id="disabled" tabindex="-1">disabled <a class="header-anchor" href="#disabled" aria-label="Permalink to &quot;disabled&quot;"></a></h2><ul><li><p><strong>详情:</strong> 是否禁用该表单内的所有组件。 若设置为 true则表单内组件上的 disabled 属性不再生效</p></li><li><p><strong>默认值:</strong> false</p></li><li><p><strong>类型:</strong> <code>boolean</code></p></li></ul><h2 id="height" tabindex="-1">height <a class="header-anchor" href="#height" aria-label="Permalink to &quot;height&quot;"></a></h2><ul><li><p><strong>详情:</strong></p></li><li><p><strong>默认值:</strong></p></li><li><p><strong>类型:</strong></p></li></ul><h2 id="stepactive" tabindex="-1">stepActive <a class="header-anchor" href="#stepactive" aria-label="Permalink to &quot;stepActive&quot;"></a></h2><ul><li><p><strong>详情:</strong></p></li><li><p><strong>默认值:</strong></p></li><li><p><strong>类型:</strong></p></li></ul><h2 id="size" tabindex="-1">size <a class="header-anchor" href="#size" aria-label="Permalink to &quot;size&quot;"></a></h2><ul><li><p><strong>详情:</strong> 用于控制该表单内组件的尺寸</p></li><li><p><strong>类型:</strong> <code>&#39;small&#39; | &#39;default&#39; | &#39;large&#39;</code></p></li></ul><h2 id="inline" tabindex="-1">inline <a class="header-anchor" href="#inline" aria-label="Permalink to &quot;inline&quot;"></a></h2><ul><li><p><strong>详情:</strong> 行内表单模式</p></li><li><p><strong>默认值:</strong> false</p></li><li><p><strong>类型:</strong> <code>boolean</code></p></li></ul><h2 id="labelposition" tabindex="-1">labelPosition <a class="header-anchor" href="#labelposition" aria-label="Permalink to &quot;labelPosition&quot;"></a></h2><ul><li><p><strong>详情:</strong> 表单域标签的位置, 当设置为 left 或 right 时,则也需要设置 label-width 属性</p></li><li><p><strong>默认值:</strong> right&#39;</p></li><li><p><strong>类型:</strong> <code>&#39;left&#39; | &#39;right&#39; | &#39;top</code></p></li></ul><h2 id="keyprop" tabindex="-1">keyProp <a class="header-anchor" href="#keyprop" aria-label="Permalink to &quot;keyProp&quot;"></a></h2><ul><li><p><strong>详情:</strong> 作为表单项的组件实例的key</p></li><li><p><strong>默认值:</strong> <code>&#39;__key&#39;</code></p></li><li><p><strong>类型:</strong> <code>string</code></p></li></ul><h2 id="popperclass" tabindex="-1">popperClass <a class="header-anchor" href="#popperclass" aria-label="Permalink to &quot;popperClass&quot;"></a></h2><ul><li><p><strong>详情:</strong> tooltip弹出层的class</p></li><li><p><strong>类型:</strong> <code>string</code></p></li></ul>`,27)]))}const d=i(t,[["render",p]]);export{g as __pageData,d as default};