Skip to content

生成自定义组件

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

提醒

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

挂载自定义组件

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

全局挂载

js
app.component(TestComponent)
app.component(TestComponent)

局部挂载

js
formCreate.component(TestComponent.name, TestComponent)
formCreate.component(TestComponent.name, TestComponent)

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

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

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

通过标签生成组件

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

生成

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

修改

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

js
fApi.getRule('btn').props.loading = false
fApi.getRule('btn').props.loading = false

示例

以ant-design-vue为例

生成ui框架自带组件

生成自定义组件

预定义 inject

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

  • formCreateInject

  • formCreateInject.api 表单api

    • formCreateInject.options rule.options
    • formCreateInject.rule 生成规则
    • formCreateInject.field 字段名

示例

Released under the MIT License.