form-create-designer中怎麼擴充套件自定義元件

xaboy發表於2024-05-21
ORM套件元件

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

相關文章