form-create

# 生成自定义组件

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

提醒

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

# 通过component配置项设置自定义组件v2.5.20+

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

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

# 挂载自定义组件

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

注意

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

全局挂载

Vue.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

# 示例

通过自定义组件实现布局

# 通过模板生成组件

通过模板的方式生成自定义组件, 不推荐

# 生成

{
    type:'template',
    name:'btn'
    template:'<i-button :loading="loading">{{text}}<i-button>',
    vm(){
        return new Vue({
         data:{
           loading:true,
           text:'正在加载中'
         }
        })
    }
}

# 预定义 props

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

  • formCreateInject

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

← 生成自定义表单组件 →