公共组件库

1. 包含符合UIUE的公共组件

2. 支持antd全部组件，引用和使用方法参考antd官方文档

使用方法

安装

npm i @chaoswise/ui -S

常规组件使用

// antd组件和自定义组件全部使用按需引入形式
import { Button } from '@chaoswise/ui';

const Demo = () => {
  return (
    <Button type='primary'>Submit</Button>
  )
}

export default Demo;

Formily组件使用

// 目前已经集成以下组件和api
import { Form, FormItem, MegaLayout, FieldList, FormButtonGroup, FormPath, Reset, Submit, subscribeFields } from '@chaoswise/ui/formily';
// 如需使用formily相关其它api 从formily引入
import { formily } from '@chaoswise/ui/formily';
const { useEffect } = formily;

按需引用webpack配置：修改babel-loader下的babel-plugin-import插件配置(脱离公共框架独立使用)

// 引入配置
const babelConfig = require("@chaoswise/ui/config/babel");
const formilyBabel = require("@chaoswise/ui/config/babel/formily");

// 方案1
plugins: [
    [
      "import",
      [
        babelConfig, // @chaoswise/ui 按需引入babel配置
        {
          libraryName: "antd",
          style: true
        },
        formilyBabel, // @chaoswise/ui/formily 按需引入babel配置
      ]
    ]
 ]
 
 
// 方案2
plugins: [
    [
        "import",
         babelConfig, // @chaoswise/ui 按需引入babel配置
         "chaoswise"
    ],
    [
        "import",
        {
          libraryName: "antd",
          style: true
        },
        "antd"
    ],
    [
      "import",
      formilyBabel, // @chaoswise/ui/formily 按需引入babel配置
      "formily"
    ],
 ]

注意：

以下组件基于antd进行了二次封装，请查看相关组件文档

组件名称	备注
Table	可控制要展示的列，集成搜索和分页，符合ue规范的分页固定在底部
Pagination	统一UE风格，api不变
Modal	支持可拖拽
Upload	基于antd的Upload封装，增加进度条显示，api有变化，具体见文档
ConfigProvider	在原有基础上增加国际化切换方案
Select	统一UE风格，api有变化，具体见文档
Empty	统一UE风格，api不变
Tree	统一UE风格，api有变化，具体见文档

---

如需引用antd原生组件

import Table from '@chaoswise/ui/lib/Antd/Table';

相关参考文档

1. 组件预览以及文档地址
2. 更新日志