快速上手

• github: github.com/easy-page/e…
• 文档站官网：easy-page.github.io/easy-page-d…
• 文档站 github: github.com/easy-page/e…

下面将以一个简单的例子，来展示，如何编写表单页面。

安装 @easy-page/antd-ui

pnpm add @easy-page/antd-ui@latest

定义输入框

// ./name.tsx
import { nodeUtil } from '@easy-page/antd-ui';

export const name = nodeUtil.createField('name', '姓名', {
  value: '',
});

拼装表单页面

// ./pageInfo.tsx
import { PageUtil } from '@easy-page/antd-ui';
import { name } from './name';
import { toolbar } from '../common/fields/toolbar';

const pu = new PageUtil({ pageId: 'form-page' });
/** 添加 name 字段到页面结构中 * */
pu.addFields([name, toolbar]);

/** 返回页面结构数据 * */
export const pageInfo = pu.getPageInfo();

EasyPage 渲染页面

import { EasyPage, commonComponents } from '@easy-page/antd-ui';
import React from 'react';
import { pageInfo } from './pageInfo';

const FormPage = () => {
  return (
    <EasyPage
      {...pageInfo}
      /** 按需加载表单所需组件 * */
      components={commonComponents}
      pageType="form"
    />
  );
};

export default FormPage;

DEMO

文档站 github: easy-page.github.io/easy-page-d…