NewbieFormDesigner

表单设计组件

Version: 1.2.0

Props

Prop name	Description	Type	Values	Default
widgets	额外的业务组件 @typedef {Object|Array} FormDesignerWidgetGroup @property [title] 分组标题 @property 组件类型	array	-	[]
formItems	表单项 @typedef {Object|Array} FormDesignerFormItemConfig @property 表单项的唯一标识 @property 表单项的类型 @property 表单项的标题 @property undefined	array|func	-	() => []
height	组件高度	string|number	-	"100%"

Events

Event name	Properties	Description
submit

---

详细参数

widget

Prop name	Description	Type	Values	Default
name	组件名称	string	-	""
type	组件实际类型	string	-	""
icon	组件图标	string	-	""
props	组件的预设配置	obj	-	null

{
    name: "年龄",
    type: "number",
    icon: h(SmileOutlined),
    props: {
        min: 18
    }
}

示例

默认

请点击或者拖拽左侧组件至下面区域生成表单

未选中组件

<script setup>
import NewbieFormDesigner from "jobsys-newbie"

const widgets = ref([])

const onSubmit = (form) => {
	console.log(form)
}
</script>

<NewbieFormDesigner height="500" :widgets="widgets" @submit="onSubmit" />