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

  • form-create-designer中怎么扩展自定义组件已关闭评论
  • 53 次浏览
  • A+
所属分类：Web前端
摘要

form-create-designer 是基于 @form-create/element-ui实现的表单设计器组件。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。
便宜好用的国外VPS推荐

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

 

便宜好用的国外VPS推荐