form-create-designer中怎麼擴展自定義組件

form-create-designer中怎麼擴展自定義組件

form-create-designer 是基於 @form-create/element-ui實現的表單設計器組件。可以通過拖拽的方式快速創建表單，提高開發者對錶單的開發效率，節省開發者的時間。

FormCreate官網：https://www.form-create.com

幫助文檔：https://pro.form-create.com/doc

體驗地址：https://pro.form-create.com/view

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',
});