Skip to content

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: '简单输入框'
      }
   ]
}

FormCreate 是一个开源项目,基于 MIT 许可证发布,欢迎个人和企业用户免费使用