扩展自定义表单组件

生成一个富文本组件,表单组件需要定义field

导入并挂载自定义组件

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


//挂载自定义组件
FcDesigner.component('UserSelect', UserSelect);
//或者全局挂载
app.component('UserSelect', 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'
        }];
    }
};

挂载组件的拖拽规则

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