扩展自定义表单组件
自定义表单组件可以用来实现业务特定的表单控件。本文将介绍如何定义和使用自定义表单组件,包括如何导入、挂载组件及设置其拖拽规则。
自定义表单组件的规范
导入并挂载自定义组件
在开始之前,你需要先导入并注册自定义组件。以下示例展示了如何将自定义的 UserSelect
组件导入并挂载到 FcDesigner
设计器中:
1. 导入并挂载自定义组件
在开始之前,你需要先导入并注册自定义组件。以下示例展示了如何将自定义的 UserSelect 组件导入并挂载到 FcDesigner 设计器中:
js
//导入表单组件
import UserSelect from './userSelect.vue';
import FcDesigner from 'path/to/fcDesignerPro';
//挂载自定义组件
FcDesigner.component('UserSelect', UserSelect);
//或者全局挂载
app.component('UserSelect', UserSelect);
2. 定义组件的拖拽规则
拖拽规则用于在设计器中配置和展示自定义组件的属性和行为。以下是一个示例,定义了一个名为 UserSelect
的自定义表单组件:
js
import uniqueId from '@form-create/utils/lib/unique';
const userSelectRule = {
//插入菜单位置
menu: 'main',
//图标
icon: 'icon-select',
//名称
label: '用户选择',
//id,唯一!
name: 'UserSelect',
//是否可以操作, 除了容器类组件建议为true !
mask: true,
//支持组件验证, 值的类型
validate: ['string'],
//定义组件的事件
event: ['change'],
//定义组件的渲染规则
rule({t}) {
//组件的生成规则
return {
type: 'UserSelect',
//field不能重复!!!
field: uniqueId(),
title: '用户选择',
info: '',
$required: false,
props: {},
};
},
//组件的属性配置
props(_, {t}) {
return [{
type: 'switch',
title: '是否禁用',
field: 'disabled'
}];
}
};
3. 挂载组件的拖拽规则
定义完拖拽规则后,你需要将这些规则挂载到设计器中。可以通过以下代码完成这一操作:
js
//挂载拖拽规则到设计器
this.$refs.designer.addComponent(userSelectRule);