荣耀头条

form-create-designer中怎么扩展自定义组件

2024-05-21 12:39 由 xaboy 发表于 #前端开发

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

 

热门相关：至尊骨   租来的男友竟是千亿总裁   镇国王归来   私家侦探：爱情与战争   隐龙之护妻高手