jobsys-newbie
Version:
Enhanced component based on ant-design-vue
53 lines (49 loc) • 38 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="VuePress 2.0.0-beta.67">
<style>
:root {
--c-bg: #fff;
}
html.dark {
--c-bg: #22272e;
}
html, body {
background-color: var(--c-bg);
}
</style>
<script>
const userMode = localStorage.getItem('vuepress-color-scheme');
const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
document.documentElement.classList.toggle('dark', true);
}
</script>
<title>NewbieFormDesigner | Newbie Component</title><meta name="description" content="Enhanced Vue components based on AntD.">
<link rel="preload" href="/docs/newbie/assets/style-398c75cc.css" as="style"><link rel="stylesheet" href="/docs/newbie/assets/style-398c75cc.css">
<link rel="modulepreload" href="/docs/newbie/assets/app-e5356031.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieFormDesigner.html-bd1c3f71.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieFormDesigner.html-bf519d6d.js"><link rel="modulepreload" href="/docs/newbie/assets/index-16cac109.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieForm-c753634a.js"><link rel="modulepreload" href="/docs/newbie/assets/compact-item-45f3d050.js"><link rel="modulepreload" href="/docs/newbie/assets/index-b4cb0b96.js"><link rel="modulepreload" href="/docs/newbie/assets/utils-584bcbdb.js"><link rel="modulepreload" href="/docs/newbie/assets/EditOutlined-9c798a71.js"><link rel="modulepreload" href="/docs/newbie/assets/style-3dc3bceb.js"><link rel="modulepreload" href="/docs/newbie/assets/useRefs-c46ab4e4.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieUploader-0b6b5515.js"><link rel="modulepreload" href="/docs/newbie/assets/index-2bac9f50.js"><link rel="modulepreload" href="/docs/newbie/assets/CloseCircleFilled-7d1a9da0.js"><link rel="modulepreload" href="/docs/newbie/assets/ExclamationCircleFilled-71949edd.js"><link rel="modulepreload" href="/docs/newbie/assets/FormItemContext-af84826a.js"><link rel="modulepreload" href="/docs/newbie/assets/useFlexGapSupport-e1acb751.js"><link rel="modulepreload" href="/docs/newbie/assets/styleChecker-8bbc1161.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieEditor-c8effb0f.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieProvider-45d73778.js"><link rel="modulepreload" href="/docs/newbie/assets/network-3dbc60ad.js"><link rel="modulepreload" href="/docs/newbie/assets/isString-dfb8fe43.js"><link rel="modulepreload" href="/docs/newbie/assets/isUndefined-aa0326a0.js"><link rel="modulepreload" href="/docs/newbie/assets/omit-dc457db2.js"><link rel="modulepreload" href="/docs/newbie/assets/index-54e202a8.js"><link rel="modulepreload" href="/docs/newbie/assets/statusUtils-41ec9e8f.js"><link rel="modulepreload" href="/docs/newbie/assets/vnode-8424d922.js"><link rel="modulepreload" href="/docs/newbie/assets/EyeOutlined-9657ac6a.js"><link rel="modulepreload" href="/docs/newbie/assets/pickAttrs-024293c9.js"><link rel="modulepreload" href="/docs/newbie/assets/index-3761f557.js"><link rel="modulepreload" href="/docs/newbie/assets/LeftOutlined-8f1bdfd3.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieAddress-a35b35ae.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieModal-bbee8112.js"><link rel="modulepreload" href="/docs/newbie/assets/index-4cb0cbae.js"><link rel="modulepreload" href="/docs/newbie/assets/index-a79ee2a0.js"><link rel="modulepreload" href="/docs/newbie/assets/isNull-4293306c.js"><link rel="modulepreload" href="/docs/newbie/assets/NewbieButton-00521913.js"><link rel="prefetch" href="/docs/newbie/assets/hooks.html-00cc23c0.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/index.html-89f7cf72.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieAddress.html-47b67690.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieButton.html-b67253b4.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieForm.html-b6dbee27.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieEditor.html-5db09ee2.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieList.html-ac7d0807.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieModal.html-c13f0bf7.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbiePassword.html-dbf4a28b.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieProvider.html-6128ffcc.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieSearch.html-6b6c26c0.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieTable.html-bc1b0a84.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieUploader.html-167fed4e.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/404.html-f9875e7b.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/hooks.html-adccea0a.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/index.html-3ebf1ebb.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieAddress.html-e037374a.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieButton.html-3aa8b13d.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieForm.html-15d8c6f5.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieEditor.html-40504152.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieList.html-2d0e9567.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieModal.html-fa7e4778.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbiePassword.html-3086c803.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieProvider.html-3069b4d1.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieSearch.html-254febfb.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieTable.html-0807cb3d.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/NewbieUploader.html-bd5b6c5d.js" as="script"><link rel="prefetch" href="/docs/newbie/assets/404.html-28bdd61b.js" as="script">
</head>
<body>
<div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/docs/newbie/" class=""><!----><span class="site-name">Newbie Component</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/docs/newbie/" class="" aria-label="首页"><!--[--><!--]--> 首页 <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="组件"><span class="title">组件</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="组件"><span class="title">组件</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/docs/newbie/components/address/NewbieAddress" class="" aria-label="NewbieAddress"><!--[--><!--]--> NewbieAddress <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/button/NewbieButton" class="" aria-label="NewbieButton"><!--[--><!--]--> NewbieButton <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/editor/NewbieEditor" class="" aria-label="NewbieEditor"><!--[--><!--]--> NewbieEditor <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/form/NewbieForm" class="" aria-label="NewbieForm"><!--[--><!--]--> NewbieForm <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/form-designer/NewbieFormDesigner" class="router-link-active" aria-label="NewbieFormDesigner"><!--[--><!--]--> NewbieFormDesigner <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/list/NewbieList" class="" aria-label="NewbieList"><!--[--><!--]--> NewbieList <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/modal/NewbieModal" class="" aria-label="NewbieModal"><!--[--><!--]--> NewbieModal <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/password/NewbiePassword" class="" aria-label="NewbiePassword"><!--[--><!--]--> NewbiePassword <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/provider/NewbieProvider" class="" aria-label="NewbieProvider"><!--[--><!--]--> NewbieProvider <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/search/NewbieSearch" class="" aria-label="NewbieSearch"><!--[--><!--]--> NewbieSearch <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/table/NewbieTable" class="" aria-label="NewbieTable"><!--[--><!--]--> NewbieTable <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/uploader/NewbieUploader" class="" aria-label="NewbieUploader"><!--[--><!--]--> NewbieUploader <!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a href="/docs/newbie/hooks" class="" aria-label="组合式 API"><!--[--><!--]--> 组合式 API <!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/docs/newbie/" class="" aria-label="首页"><!--[--><!--]--> 首页 <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="组件"><span class="title">组件</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="组件"><span class="title">组件</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/docs/newbie/components/address/NewbieAddress" class="" aria-label="NewbieAddress"><!--[--><!--]--> NewbieAddress <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/button/NewbieButton" class="" aria-label="NewbieButton"><!--[--><!--]--> NewbieButton <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/editor/NewbieEditor" class="" aria-label="NewbieEditor"><!--[--><!--]--> NewbieEditor <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/form/NewbieForm" class="" aria-label="NewbieForm"><!--[--><!--]--> NewbieForm <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/form-designer/NewbieFormDesigner" class="router-link-active" aria-label="NewbieFormDesigner"><!--[--><!--]--> NewbieFormDesigner <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/list/NewbieList" class="" aria-label="NewbieList"><!--[--><!--]--> NewbieList <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/modal/NewbieModal" class="" aria-label="NewbieModal"><!--[--><!--]--> NewbieModal <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/password/NewbiePassword" class="" aria-label="NewbiePassword"><!--[--><!--]--> NewbiePassword <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/provider/NewbieProvider" class="" aria-label="NewbieProvider"><!--[--><!--]--> NewbieProvider <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/search/NewbieSearch" class="" aria-label="NewbieSearch"><!--[--><!--]--> NewbieSearch <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/table/NewbieTable" class="" aria-label="NewbieTable"><!--[--><!--]--> NewbieTable <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/docs/newbie/components/uploader/NewbieUploader" class="" aria-label="NewbieUploader"><!--[--><!--]--> NewbieUploader <!--[--><!--]--></a></li><!--]--></ul></div></div><div class="navbar-item"><a href="/docs/newbie/hooks" class="" aria-label="组合式 API"><!--[--><!--]--> 组合式 API <!--[--><!--]--></a></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><p tabindex="0" class="sidebar-item sidebar-heading">NewbieFormDesigner <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/docs/newbie/components/form-designer/NewbieFormDesigner.html#props" class="router-link-active router-link-exact-active sidebar-item" aria-label="Props"><!--[--><!--]--> Props <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form-designer/NewbieFormDesigner.html#events" class="router-link-active router-link-exact-active sidebar-item" aria-label="Events"><!--[--><!--]--> Events <!--[--><!--]--></a><!----></li><li><a aria-current="page" href="/docs/newbie/components/form-designer/NewbieFormDesigner.html#详细参数" class="router-link-active router-link-exact-active sidebar-item" aria-label="详细参数"><!--[--><!--]--> 详细参数 <!--[--><!--]--></a><ul style="" class="sidebar-item-children"><!--[--><li><a aria-current="page" href="/docs/newbie/components/form-designer/NewbieFormDesigner.html#widget" class="router-link-active router-link-exact-active sidebar-item" aria-label="widget"><!--[--><!--]--> widget <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a aria-current="page" href="/docs/newbie/components/form-designer/NewbieFormDesigner.html#示例" class="router-link-active router-link-exact-active sidebar-item" aria-label="示例"><!--[--><!--]--> 示例 <!--[--><!--]--></a><!----></li><!--]--></ul></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="newbieformdesigner" tabindex="-1"><a class="header-anchor" href="#newbieformdesigner" aria-hidden="true">#</a> NewbieFormDesigner</h1><blockquote><p>表单设计组件</p></blockquote><p>Version: 1.2.0</p><h2 id="props" tabindex="-1"><a class="header-anchor" href="#props" aria-hidden="true">#</a> Props</h2><table><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>widgets</td><td>额外的业务组件<br><code>@typedef</code> {Object|Array} FormDesignerWidgetGroup<br><code>@property</code> [title] 分组标题<br><code>@property</code> 组件类型</td><td>array</td><td>-</td><td>[]</td></tr><tr><td>formItems</td><td>表单项<br><code>@typedef</code> {Object|Array} FormDesignerFormItemConfig<br><code>@property</code> 表单项的唯一标识<br><code>@property</code> 表单项的类型<br><code>@property</code> 表单项的标题<br><code>@property</code> undefined</td><td>array|func</td><td>-</td><td>() => []</td></tr><tr><td>height</td><td>组件高度</td><td>string|number</td><td>-</td><td>"100%"</td></tr></tbody></table><h2 id="events" tabindex="-1"><a class="header-anchor" href="#events" aria-hidden="true">#</a> Events</h2><table><thead><tr><th>Event name</th><th>Properties</th><th>Description</th></tr></thead><tbody><tr><td>submit</td><td></td><td></td></tr></tbody></table><hr><h2 id="详细参数" tabindex="-1"><a class="header-anchor" href="#详细参数" aria-hidden="true">#</a> 详细参数</h2><h3 id="widget" tabindex="-1"><a class="header-anchor" href="#widget" aria-hidden="true">#</a> <code>widget</code></h3><table><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td>name</td><td>组件名称</td><td>string</td><td>-</td><td>""</td></tr><tr><td>type</td><td>组件实际类型</td><td>string</td><td>-</td><td>""</td></tr><tr><td>icon</td><td>组件图标</td><td>string</td><td>-</td><td>""</td></tr><tr><td>props</td><td>组件的预设配置</td><td>obj</td><td>-</td><td>null</td></tr></tbody></table><div class="language-json line-numbers-mode" data-ext="json"><pre class="language-json"><code><span class="token punctuation">{</span>
name<span class="token operator">:</span> <span class="token string">"年龄"</span><span class="token punctuation">,</span>
type<span class="token operator">:</span> <span class="token string">"number"</span><span class="token punctuation">,</span>
icon<span class="token operator">:</span> h(SmileOutlined)<span class="token punctuation">,</span>
props<span class="token operator">:</span> <span class="token punctuation">{</span>
min<span class="token operator">:</span> <span class="token number">18</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="示例" tabindex="-1"><a class="header-anchor" href="#示例" aria-hidden="true">#</a> 示例</h2><div class="newbie-form-designer" style="height:500px;"><div class="newbie-form-designer__widget-container"><div class="widget-container"><!--[--><div class="widget-list-container"><div class="widget-list-title">默认</div><div class="widget-list"><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="edit" class="anticon anticon-edit"><svg focusable="false" class="" style="" data-icon="edit" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M257.7 752c2 0 4-.2 6-.5L431.9 722c2-.4 3.9-1.3 5.3-2.8l423.9-423.9a9.96 9.96 0 000-14.1L694.9 114.9c-1.9-1.9-4.4-2.9-7.1-2.9s-5.2 1-7.1 2.9L256.8 538.8c-1.5 1.5-2.4 3.3-2.8 5.3l-29.5 168.2a33.5 33.5 0 009.4 29.8c6.6 6.4 14.9 9.9 23.8 9.9zm67.4-174.4L687.8 215l73.3 73.3-362.7 362.6-88.9 15.7 15.6-89zM880 836H144c-17.7 0-32 14.3-32 32v36c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-36c0-17.7-14.3-32-32-32z"></path></svg></span></span><span class="widget-name">文本</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="form" class="anticon anticon-form"><svg focusable="false" class="" style="" data-icon="form" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M904 512h-56c-4.4 0-8 3.6-8 8v320H184V184h320c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V520c0-4.4-3.6-8-8-8z"></path><path d="M355.9 534.9L354 653.8c-.1 8.9 7.1 16.2 16 16.2h.4l118-2.9c2-.1 4-.9 5.4-2.3l415.9-415c3.1-3.1 3.1-8.2 0-11.3L785.4 114.3c-1.6-1.6-3.6-2.3-5.7-2.3s-4.1.8-5.7 2.3l-415.8 415a8.3 8.3 0 00-2.3 5.6zm63.5 23.6L779.7 199l45.2 45.1-360.5 359.7-45.7 1.1.7-46.4z"></path></svg></span></span><span class="widget-name">多行文本</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg focusable="false" class="" style="" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M699 353h-46.9c-10.2 0-19.9 4.9-25.9 13.3L469 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H325c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8a31.8 31.8 0 0051.7 0l210.6-292c3.9-5.3.1-12.7-6.4-12.7z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span></span><span class="widget-name">单选</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="check-square" class="anticon anticon-check-square"><svg focusable="false" class="" style="" data-icon="check-square" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M433.1 657.7a31.8 31.8 0 0051.7 0l210.6-292c3.8-5.3 0-12.7-6.5-12.7H642c-10.2 0-19.9 4.9-25.9 13.3L459 584.3l-71.2-98.8c-6-8.3-15.6-13.3-25.9-13.3H315c-6.5 0-10.3 7.4-6.5 12.7l124.6 172.8z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></span></span><span class="widget-name">多选</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="down-square" class="anticon anticon-down-square"><svg focusable="false" class="" style="" data-icon="down-square" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M505.5 658.7c3.2 4.4 9.7 4.4 12.9 0l178-246c3.8-5.3 0-12.7-6.5-12.7H643c-10.2 0-19.9 4.9-25.9 13.2L512 558.6 406.8 413.2c-6-8.3-15.6-13.2-25.9-13.2H334c-6.5 0-10.3 7.4-6.5 12.7l178 246z"></path><path d="M880 112H144c-17.7 0-32 14.3-32 32v736c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V144c0-17.7-14.3-32-32-32zm-40 728H184V184h656v656z"></path></svg></span></span><span class="widget-name">下拉选择</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="switcher" class="anticon anticon-switcher"><svg focusable="false" class="" style="" data-icon="switcher" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M752 240H144c-17.7 0-32 14.3-32 32v608c0 17.7 14.3 32 32 32h608c17.7 0 32-14.3 32-32V272c0-17.7-14.3-32-32-32zm-40 600H184V312h528v528zm168-728H264c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h576v576c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8V144c0-17.7-14.3-32-32-32zM300 550h296v64H300z"></path></svg></span></span><span class="widget-name">开关</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="field-binary" class="anticon anticon-field-binary"><svg focusable="false" class="" style="" data-icon="field-binary" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><defs><style></style></defs><path d="M600 395.4h91V649h79V267c0-4.4-3.6-8-8-8h-48.2c-3.7 0-7 2.6-7.7 6.3-2.6 12.1-6.9 22.3-12.9 30.9a86.14 86.14 0 01-26.3 24.4c-10.3 6.2-22 10.5-35 12.9-10.4 1.9-21 3-32 3.1a8 8 0 00-7.9 8v42.8c0 4.4 3.6 8 8 8zM871 702H567c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h304c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8zM443.9 312.7c-16.1-19-34.4-32.4-55.2-40.4-21.3-8.2-44.1-12.3-68.4-12.3-23.9 0-46.4 4.1-67.7 12.3-20.8 8-39 21.4-54.8 40.3-15.9 19.1-28.7 44.7-38.3 77-9.6 32.5-14.5 73-14.5 121.5 0 49.9 4.9 91.4 14.5 124.4 9.6 32.8 22.4 58.7 38.3 77.7 15.8 18.9 34 32.3 54.8 40.3 21.3 8.2 43.8 12.3 67.7 12.3 24.4 0 47.2-4.1 68.4-12.3 20.8-8 39.2-21.4 55.2-40.4 16.1-19 29-44.9 38.6-77.7 9.6-33 14.5-74.5 14.5-124.4 0-48.4-4.9-88.9-14.5-121.5-9.5-32.1-22.4-57.7-38.6-76.8zm-29.5 251.7c-1 21.4-4.2 42-9.5 61.9-5.5 20.7-14.5 38.5-27 53.4-13.6 16.3-33.2 24.3-57.6 24.3-24 0-43.2-8.1-56.7-24.4-12.2-14.8-21.1-32.6-26.6-53.3-5.3-19.9-8.5-40.6-9.5-61.9-1-20.8-1.5-38.5-1.5-53.2 0-8.8.1-19.4.4-31.8.2-12.7 1.1-25.8 2.6-39.2 1.5-13.6 4-27.1 7.6-40.5 3.7-13.8 8.8-26.3 15.4-37.4 6.9-11.6 15.8-21.1 26.7-28.3 11.4-7.6 25.3-11.3 41.5-11.3 16.1 0 30.1 3.7 41.7 11.2a87.94 87.94 0 0127.4 28.2c6.9 11.2 12.1 23.8 15.6 37.7 3.3 13.2 5.8 26.6 7.5 40.1 1.8 13.5 2.8 26.6 3 39.4.2 12.4.4 23 .4 31.8.1 14.8-.4 32.5-1.4 53.3z"></path></svg></span></span><span class="widget-name">数字</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="star" class="anticon anticon-star"><svg focusable="false" class="" style="" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3zM664.8 561.6l36.1 210.3L512 672.7 323.1 772l36.1-210.3-152.8-149L417.6 382 512 190.7 606.4 382l211.2 30.7-152.8 148.9z"></path></svg></span></span><span class="widget-name">评分</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" style="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span><span class="widget-name">日期</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="calendar" class="anticon anticon-calendar"><svg focusable="false" class="" style="" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></span><span class="widget-name">日期范围</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" style="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span><span class="widget-name">时间</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle"><svg focusable="false" class="" style="" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span><span class="widget-name">时间范围</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="file-image" class="anticon anticon-file-image"><svg focusable="false" class="" style="" data-icon="file-image" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M553.1 509.1l-77.8 99.2-41.1-52.4a8 8 0 00-12.6 0l-99.8 127.2a7.98 7.98 0 006.3 12.9H696c6.7 0 10.4-7.7 6.3-12.9l-136.5-174a8.1 8.1 0 00-12.7 0zM360 442a40 40 0 1080 0 40 40 0 10-80 0zm494.6-153.4L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"></path></svg></span></span><span class="widget-name">图片上传</span><!--]--></button><button class="css-1ugq3w3 ant-btn ant-btn-default widget-item drag-handle" data-draggable="true" type="button"><!----><!--[--><span role="img" class="widget-icon"><span role="img" aria-label="file-pdf" class="anticon anticon-file-pdf"><svg focusable="false" class="" style="" data-icon="file-pdf" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M531.3 574.4l.3-1.4c5.8-23.9 13.1-53.7 7.4-80.7-3.8-21.3-19.5-29.6-32.9-30.2-15.8-.7-29.9 8.3-33.4 21.4-6.6 24-.7 56.8 10.1 98.6-13.6 32.4-35.3 79.5-51.2 107.5-29.6 15.3-69.3 38.9-75.2 68.7-1.2 5.5.2 12.5 3.5 18.8 3.7 7 9.6 12.4 16.5 15 3 1.1 6.6 2 10.8 2 17.6 0 46.1-14.2 84.1-79.4 5.8-1.9 11.8-3.9 17.6-5.9 27.2-9.2 55.4-18.8 80.9-23.1 28.2 15.1 60.3 24.8 82.1 24.8 21.6 0 30.1-12.8 33.3-20.5 5.6-13.5 2.9-30.5-6.2-39.6-13.2-13-45.3-16.4-95.3-10.2-24.6-15-40.7-35.4-52.4-65.8zM421.6 726.3c-13.9 20.2-24.4 30.3-30.1 34.7 6.7-12.3 19.8-25.3 30.1-34.7zm87.6-235.5c5.2 8.9 4.5 35.8.5 49.4-4.9-19.9-5.6-48.1-2.7-51.4.8.1 1.5.7 2.2 2zm-1.6 120.5c10.7 18.5 24.2 34.4 39.1 46.2-21.6 4.9-41.3 13-58.9 20.2-4.2 1.7-8.3 3.4-12.3 5 13.3-24.1 24.4-51.4 32.1-71.4zm155.6 65.5c.1.2.2.5-.4.9h-.2l-.2.3c-.8.5-9 5.3-44.3-8.6 40.6-1.9 45 7.3 45.1 7.4zm191.4-388.2L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.3c0-8.5-3.4-16.7-9.4-22.7zM790.2 326H602V137.8L790.2 326zm1.8 562H232V136h302v216a42 42 0 0042 42h216v494z"></path></svg></span></span><span class="widget-name">文件上传</span><!--]--></button></div></div><!--]--></div></div><div class="newbie-form-designer__painter-container"><form class="ant-form ant-form-horizontal css-1ugq3w3 newbie-form"><!--[--><div class="newbie-form-designer__help-wrapper"><p><span role="img" aria-label="smile" style="margin-right:4px;" class="anticon anticon-smile"><svg focusable="false" class="" style="" data-icon="smile" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#1890ff"></path><path d="M512 140c-205.4 0-372 166.6-372 372s166.6 372 372 372 372-166.6 372-372-166.6-372-372-372zM288 421a48.01 48.01 0 0196 0 48.01 48.01 0 01-96 0zm224 272c-85.5 0-155.6-67.3-160-151.6a8 8 0 018-8.4h48.1c4.2 0 7.8 3.2 8.1 7.4C420 589.9 461.5 629 512 629s92.1-39.1 95.8-88.6c.3-4.2 3.9-7.4 8.1-7.4H664a8 8 0 018 8.4C667.6 625.7 597.5 693 512 693zm176-224a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" fill="#e6f7ff"></path><path d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm376 112h-48.1c-4.2 0-7.8 3.2-8.1 7.4-3.7 49.5-45.3 88.6-95.8 88.6s-92-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4zm-24-112a48 48 0 1096 0 48 48 0 10-96 0z" fill="#1890ff"></path></svg></span>请点击或者拖拽左侧组件至下面区域生成表单</p></div><!--[--><div class="painter-wrapper"></div><!--]--><!----><!--]--></form></div><div class="newbie-form-designer__props-container"><div class="empty-props">未选中组件</div></div></div><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">setup</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> NewbieFormDesigner <span class="token keyword">from</span> <span class="token string">"jobsys-newbie"</span>
<span class="token keyword">const</span> widgets <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">onSubmit</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">form</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>form<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>NewbieFormDesigner</span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>500<span class="token punctuation">"</span></span> <span class="token attr-name">:widgets</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>widgets<span class="token punctuation">"</span></span> <span class="token attr-name">@submit</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onSubmit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div><!--[--><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">Last Updated: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: sinceow@163.com">sinceow</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
<script type="module" src="/docs/newbie/assets/app-e5356031.js" defer></script>
</body>
</html>