扩展自定义组件

生成一个自定义组件,不是表单组件所以无需定义field

导入并挂载自定义组件

//导入自定义组件
import MyButton from './button.Vue';
import FcDesigner from '@form-create/designer';


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

定义组件的拖拽规则

const buttonRule = {
    //插入菜单位置
    menu: 'aide',
    //图标
    icon: 'icon-button',
    //名称
    label: '按钮',
    //id,唯一!
    name: 'MyButton',
    //是否可以操作, 除了容器类组件建议为true !
    mask: true,
    //定义组件的事件
    event: ['click'],
    //定义组件的渲染规则
    rule({t}) {
      	//自定义组件的生成规则
        return {
            type: 'MyButton',
            props: {},
            children: ['按钮'],
        };
    },
  	//自定义组件的属性配置
    props(_, {t}) {
        return [{
            //修改rule.children[0]
            type: 'input',
          	title: '内容',
            field: 'formCreateChild',
        }, {
            //修改rule.props.size
            type: 'select',
          	title: '尺寸',
            field: 'size',
            options: [
              {label: 'large', value: 'large'}, 
              {label: 'default', value: 'default'}, 
              {label: 'small',value: 'small'}
            ]
        }];
    }
};

挂载组件的拖拽规则

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