antd-mobile-editor

gaea-editor for ant design mobile

UI 设计页面

业务逻辑页面

使用说明

• gaea-injection-editor
• gaea-injection-render

基于 gaea-editor 和 gaea-render 改造为通过属性注入的方式实现 UI 设计和业务逻辑的开发。

UI 设计

根据 gaea-editor 说明开发组件。本项目组织方式为在 /components 开发原始组件，在 /gaea-components 下配置对应组件在编辑器中可配置的相关属性。

业务逻辑

根据保存导出的 json 对象渲染页面。

注入数据和回调事件

injectPropsToUI(renderJson, config)

当前注入属性映射为：

• dataSource => data
• dataLoading => loading
• handleClick => onClick

可通过配置 injectionMap 扩展可注入的数据和回调事件。

举例说明

在 gaea-components 中的 Gird 组件中调用 addInjectToEditor() 添加可配置属性。

import { addInjectToEditor } from '@/utils/gaea';

public editSetting = {
  key: 'grid',
  name: 'Grid',
  editors: [
    addInjectToEditor(),  // 添加所有可注入属性配置
    // ...
  ],
};

在编辑器中将 dataSource 配置为 'menuData'，将 handleClick 配置为 'handleMenuClick'。

页面渲染时调用 injectPropsToUI(renderJson, config) 将注入数据和回调事件，如下将 pageConfig 注入到 renderJson 中即可。

import InjectionRender from 'gaea-injection-render';
import { Grid } from '@/gaea-components/antd-mobile';
import { injectPropsToUI } from '@/utils/gaea';

const pageConfig = {
  menuData: [
    {
      text: '菜单一',
      icon: <CustomIcon type='empty' />,
    },
    {
      text: '菜单二',
      icon: <CustomIcon type='empty' />,
    },
  ],
  handleMenuClick: (item) => {
    console.log(item);
  },
}

export default () => {
  return (
    <InjectionRender
      componentClasses={[
        Grid,
        // custom components...
      ]}
      value={injectPropsToUI(renderJson, pageConfig)}
    />
  );
}