5e-UI 组件库

Button

<Button type="primary" disabled>
  Primary
</Button>

| 参数 | 说明 | 类型 | 默认值 | | --------- | ---------------- | ----------------------------------- | ------ | | type | 设置按钮类型 | primary | danger | ghost | black | - | | size | 设置按钮大小 | large | small | large | | disabled | 按钮失效状态 | boolean | false | | className | 自定义 className | string | - | | onClick | 点击按钮时的回调 | (event) => void | - |

Icon

Icon 组件操作流程

• 进入阿里巴巴图标库 - https://www.iconfont.cn/，通过git账号密码登录
• 资源管理 - 我的项目（需要项目管理员提前添加项目成员）
• 并且复制 Symbol 在线代码，复制代码(图标库在线 js 文件路径)，粘贴代码（路径）到 app.html
• 使用< Icon name="图标库的名称" />

<script src="//at.alicdn.com/t/font_2552364_41dw50uttv.js"></script>

<Icon name="close" />

| 参数 | 说明 | 类型 | 默认值 | | --------- | ---------------- | --------------- | ------ | | name | 内置 icon 名称 | string | - | | className | 自定义 className | string | - | | onClick | 点击按钮时的回调 | (event) => void | - |

Tag

<Tag name='测试tag' />
<Tag name='测试tag' closable />

| 参数 | 说明 | 类型 | 默认值 | | ---------- | ------------------------ | -------------- | ------ | | name | tag 内容 | string | - | | color | tag 字体颜色以及边框颜色 | string | - | | background | tag 背景颜色 | string | - | | closable | 是否显示关闭 icon | false | - | | afterClose | 点击关闭 icon 后的回调 | (name) => void | - | | className | 自定义 className | string | - | | onClick | 点击 tag 时的回调 | (name) => void | - |

Toast

每个 Toast.loading 方法需要被 Toast.hide()消费掉才能继续使用 Toast 的方法，如果 loading 方法未消费就使用其他 Api 会导致其他 Api 失效并且 loading 关闭。

具体演示代码请到对应组件查看

Api

• Toast.success({content, duration, onClose, mask})

• Toast.fail({content, duration, onClose, mask})

• Toast.info({content, duration, onClose, mask, contentStyle, position, top})

• Toast.loading({content, duration, onClose, mask})

• Toast.hide()

| 参数 | 说明 | 类型 | 默认值 | | ------------ | --------------------------------------------------------- | ----------------------- | ------ | | content | 提示内容 | React.Element or String | - | | duration | 自动关闭的延时，单位秒 | number | 3 | | mask | 是否显示透明蒙层，防止触摸穿透 | Boolean | true | | position | 消息位置 | bottom | middle | top | middle | | contentStyle | 消息弹窗样式 | {} | - | | top | 距离顶部的距离(当 position 为 top 时生效) ｜ number ｜ 36 | | onClose | toast 关闭回调 ｜ () => void | - |

Message - Toast 的特殊实现

具体演示代码请到对应组件查看

Api

• message.info({content, duration, onClose, top})

| 参数 | 说明 | 类型 | 默认值 | | -------- | --------------------------------------------------------- | ----------------------- | ------ | | content | 提示内容 | React.Element or String | - | | duration | 自动关闭的延时，单位秒 | number | 3 | | top | 距离顶部的距离(当 position 为 top 时生效) ｜ number ｜ 36 | | onClose | toast 关闭回调 ｜ () => void | - |

WrapperCenter

具体演示代码请到对应组件查看

| 参数 | 说明 | 类型 | 默认值 | | --------- | ---------------- | ------------- | ------ | | children | 居中内容 | React.Element | - | | className | 自定义 className | string | - |

TreeSelect

目前选中状态是外层传递选中的树节点数组，每次递归遍历的时候判断是否选中 - 选中的树节点数组.includes(当前节点 value)。

todo disabled 属性应该在每个节点上

具体演示代码请到对应组件查看

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ---------------------------------------- | ---------------------------------------------- | ------ | | data | treeNodes 数据(value 在整个树范围内唯一) | array<{value, title, children,departInfoList}> | - | | multi | 支持点选多个节点 | boolean | false | | selected | 选中的树节点数组 | number[] | [] | | onSelect | 点击选中的回调 | function | - | | levelPadding | 层级节点外边距 | number | 24 |

SelectPeople

具体演示代码请到对应组件查看

| 参数 | 说明 | 类型 | 默认值 | | ------------ | ---------------------------------------- | ---------------------------------------------- | ------ | | title | 通讯录名称 | string | - | | isPcClient | 是否客户端 | boolean | false | | renderNode | 自定义渲染节点 | (nodeData) => ReactNode | - | | footer | 自定义底部按钮 | ReactNode | - | | onConfirm | 点击确定回调 | function(e) | - | | onCancel | 点击取消回调 | function(e) | - | | data | treeNodes 数据(value 在整个树范围内唯一) | array<{value, title, children,departInfoList}> | - | | multi | 支持点选多个节点 | boolean | false | | selectedIds | 选中的树节点数组 | number[] | [] | | handleSelect | 点击选中的回调 | function | - | | levelPadding | 层级节点外边距 | number | 24 |

TODO

• 蒙板组件
• toast 组件的 mask 效果使用蒙板组件
• 弹窗组件
• 结果页组件
• 树选择组件样式优化
• menu 组件样式优化