生成自定义组件
form-create 支持的在表单内部生成任何 vue 组件
提醒
挂载自定义组件
通过 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
表单apiformCreateInject.options
rule.optionsformCreateInject.rule
生成规则formCreateInject.field
字段名
示例