type
type
字段用于指定要在表单中生成的组件或 HTML 标签类型。它支持生成标准表单组件、自定义 Vue 组件以及 HTML 标签,允许用户根据表单需求灵活地选择和使用不同的组件。
字段类型
ts
type: string
示例
生成内置表单组件
生成常见的表单组件,如文本输入框、下拉选择框、复选框等。
js
{
type: 'input',
field: 'username',
title: '用户名',
props: {
placeholder: '请输入用户名'
}
},
{
type: 'select',
field: 'country',
title: '国家',
options: [
{ label: '美国', value: 'USA' },
{ label: '中国', value: 'China' }
]
},
{
type: 'checkbox',
field: 'accept_terms',
title: '同意条款',
value: false
}
生成自定义Vue组件
可以使用 type 字段生成已注册的自定义 Vue 组件。这个示例假设有一个名为 CustomInput 的自定义组件。
js
{
type: 'CustomInput',
field: 'custom_field',
title: '自定义输入框',
props: {
placeholder: '请输入自定义内容'
}
}
生成HTML标签
除了生成表单组件外,type 还可以用于生成基本的 HTML 标签,如 div、span 等,用于布局和包装其他组件。
js
{
type: 'div',
children: [
{
type: 'span',
title: '标签内容'
},
{
type: 'input',
field: 'simple_input',
title: '简单输入框'
}
]
}