扩展自定义表单组件

自定义表单组件可以用来实现业务特定的表单控件。本文将介绍如何定义和使用自定义表单组件，包括如何导入、挂载组件及设置其拖拽规则。

自定义表单组件的规范

自定义表单组件

导入并挂载自定义组件

在开始之前，你需要先导入并注册自定义组件。以下示例展示了如何将自定义的 UserSelect 组件导入并挂载到 FcDesigner 设计器中：

1. 导入并挂载自定义组件

在开始之前，你需要先导入并注册自定义组件。以下示例展示了如何将自定义的 UserSelect 组件导入并挂载到 FcDesigner 设计器中：

//导入表单组件
import UserSelect from './userSelect.vue';
import FcDesigner from '@form-create/designer';


//挂载自定义组件
FcDesigner.component('UserSelect', UserSelect);
//或者全局挂载
app.component('UserSelect', UserSelect);

2. 定义组件的拖拽规则

拖拽规则用于在设计器中配置和展示自定义组件的属性和行为。以下是一个示例，定义了一个名为 UserSelect 的自定义表单组件：

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. 挂载组件的拖拽规则

定义完拖拽规则后，你需要将这些规则挂载到设计器中。可以通过以下代码完成这一操作：

//挂载拖拽规则到设计器
this.$refs.designer.addComponent(userSelectRule);