生成自定义组件

form-create 支持的在表单内部生成任何 vue 组件

提醒

  • 自定义组件必须在生成之前挂载或注册
  • 只有当你需要通过fApi.component()方法获取该组件的生成规则时,需要定义name属性
  • 当你需要让自定义组件和内置组件具有一样的功能时,可以将其转换为表单组件
  • 3.1.6版本可以直接通过component配置项设置组件

通过component配置项设置自定义组件

通过这种方式可以跳过挂载自定义组件环节

const rule = {
   type:'test',
   component: TestComponent
}

挂载自定义组件

通过 form-create 生成的组件需要先通过以下方式挂载后才可以生成.

注意

  1. TestComponent为自定义组件
  2. 1.x版本使用局部挂载的方式挂载组件需要在挂载 form-create 之前执行

全局挂载

app.component(TestComponent)

局部挂载

formCreate.component(TestComponent.name, TestComponent)

通过标签生成组件

通过建立一个虚拟 DOM的方式生成自定义组件

生成

{
    type:'i-button',
    name: 'btn',
    props:{
    	type:'primary',
    	field:'btn',
    	loading:true
    },
    children:['加载中']
  }

修改

通过fApi.component()方法获取组件的生成规则并修改

fApi.component().btn.props.loading = false

示例

通过自定义组件实现布局

预定义 inject

组件生成时会给自定义组件注入以下参数

  • formCreateInject

    • formCreateInject.api fapi
    • formCreateInject.options rule.options
    • formCreateInject.rule 生成规则
    • formCreateInject.field rule.field