快速入门

组件介绍

当系统的组件不满足你的需求的时候，可以通过自定义组件来实现复杂的需求。

创建组件

打开系统，可以在上面标签栏中看到组件库标签，点击组件库切换。

点击下方新建按钮可以新建自定义组件，填写组件信息后，保存后组件就创建成功了。

编辑器布局介绍

组件编辑器主要分三个大区域，左边是代码区域，中间是组件预览区域，右边是属性配置区域。

代码区域分三个标签页

• index.jsx 编写组件代码
• index.less 编写组件使用到的样式
• config.js 编写组件的配置

组件开发使用流程

编写组件代码

在 index.jsx 编辑器里输入 react 代码

import React from 'react';

export default function Demo({ title, context: { id } }) {
  return (
    <div data-id={id} className="title">
      {title}
    </div>
  );
}

注意：导出的组件根元素必须有 data-id 这个属性，绑定 context 中 id 属性，这个属性是用来支持在编辑器中选择当前组件，修改组件属性使用的。

编写组件样式

切换到 index.less 编辑器，编写样式，给文字设置为红色。

.title {
  color: red;
}

编写组件配置

切换到 config.js 编辑器，编写组件配置，添加 title 字段配置以及 title 默认值。

export default {
    // 组件属性配置JSON
    attrs: [{
            type: 'Title',
            label: '基础配置',
            name: 'base',
        },
        {
            type: 'Input',
            label: '标题',
            name: 'title',
        },
    ],
    config: {
        // 组件默认属性值
        props: {
            title: 'hello',
        },
        // 组件样式
        style: {},
        api: {},
    },
    // 组件事件
    events: [],
    methods: [],
};

保存并预览组件效果

点击 保存并预览 按钮就能看到组件效果了

也可以在右边的配置改标题，中间的组件会实时更新。

发布组件

点击发布按钮按钮，可以把组件发布出去，然后在页面编辑器中使用。

使用组件

随便找一个页面，进入编辑，可以在自定义组件页签中看到刚才发布的组件。

点击或拖拽组件到画布中，可以对组件进行编辑。

这样就完成了一个自定义组件的开发