1.0.28 • Published 4 years ago
ui-component-5e v1.0.28
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 组件样式优化
1.0.28
4 years ago