1.导入并挂载自定义组件
//导入自定义组件
import MyButton from './button.Vue';
import FcDesigner from '@form-create/designer';
//挂载自定义组件
FcDesigner.component('MyButton', MyButton);
//或者全局挂载
app.component('MyButton', MyButton);
2.定义组件的拖拽规则
const buttonRule = {
//插入菜单位置
menu: 'aide',
//图标
icon: 'icon-button',
//名称
label: '按钮',
//id,唯一!
name: 'MyButton',
//是否可以操作, 除了容器类组件建议为true !
mask: true,//定义组件的渲染规则
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'}
]
}];
}
};
3.挂载组件的拖拽规则
//挂载拖拽规则
this.$refs.designer.addComponent(buttonRule);
this.$refs.designer.appendMenuItem('main', {
icon: 'icon-button',
label: '按钮',
name: 'MyButton',
});
