category: Components type: UI Views component: Overlay chinese: 交互3.0模态框组件 english: InterDialog
交互3.0-弹出框组件
基于交互3.0的模态框组件,符合交互3.0的样式要求和动画要求,支持多级(目前建议最多三级)弹出框切换。 提供了常用的 alert, confirm, warning 快捷调用,在 walle 中直接通过以下方式调用 建议大家从交互2.0 中提供的 TaskOverlay & Dialog 替换为该组件
walle.ui.InterDialog.alert
walle.ui.InterDialog.confirm
walle.ui.InterDialog.warning
组件支持的多语言包括: 中文(zh-cn)、英语(en-us)、繁体(zh-tw)、西班牙语(es-es)、日语(jp-jp)、韩语(ko-kr)、俄语(ru-ru)
API
InterDialog
备注:InterDialog 基于组件 Overlay,下表是新增或者改写的props
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
animationTime | 动画的运行时间(默认单位:ms) | Number | 400 |
cancelText | 取消按钮的文字提示 | String | "取消" |
deleteText | 删除按钮的文字提示 | String | "删除" |
okText | 弹出面板确定按钮的文字 | String | "确定" |
className | 可以被穿透到模态框容器元素的类名 | String | false |
footer | 自定义底部,设置为 false 则不展示 | ReactNode/Boolean | null |
header | 自定义头部,设置为 false 则不展示 | ReactNode/Boolean | null |
height | 弹出面板的高度 | Number | 300 |
onRequestClose | 点击关闭按钮时触发的回调 | Function | () => {} |
onCancel | 点击取消按钮以后的回调 | Function | () => {} |
onDelete | 弹出面板删除按钮被点击的回调 | Function | () => {} |
onOk | 弹出面板确定按钮被点击的回调 | Function | () => {} |
onClose | 弹出面板关闭以后的回调(仅在关闭以后触发,点击关闭按钮的回调请见 onRequestClose ) |
Function | () => {} |
root | react顶层容器元素的ID | String | "root" |
style | 可以被穿透到模态框容器元素的样式 | Object | {} |
title | 弹出面板的题目 | String | "设置" |
visible | 弹出面板是否可见 | Bool | false |
width | 控制弹出面板的宽度 | Number | 500 |
align | 弹层出现的位置 | String | 'cc cc' |
hasClose | 是否含有弹框右上角的删除按钮 | Boolean | true |
setting | 设置又上角的操作按钮,设置该值后,关闭按钮会被去掉,如果不需要请设置为 false | ReactNode/Boolean | null |
disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |
同时,原组件的其余props也可以继续使用,包括(以下内容来自fusion文档):
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
prefix | 样式类名的品牌前缀 | String | 'next-' |
canCloseByEsc | 是否支持esc按键关闭浮层 | Boolean | true |
canCloseByOutSideClick | 点击浮层外的区域是否关闭浮层 | Boolean | true |
canCloseByMask | 点击遮罩区域是否关闭浮层 | Boolean | true |
target | 配置浮层定位的参照元素 | any | Position.VIEWPORT |
align | 浮层相对于target的定位, 详见开发指南的定位部分 | String/Boolean | 'tl bl' |
offset | 浮层相对于target定位的微调 | Array | [0, 0] |
beforeClose | 浮层关闭前触发的事件 签名: Function() => void |
Function | () => {} |
afterClose | 浮层关闭后触发的事件, 如果有动画,则在动画结束后触发 签名: Function() => void |
Function | () => {} |
beforeOpen | 浮层打开前触发的事件 签名: Function() => void |
Function | () => {} |
onOpen | 浮层打开后触发的事件 签名: Function() => void |
Function | () => {} |
afterOpen | 浮层打开后触发的事件, 如果有动画,则在动画结束后触发 签名: Function() => void |
Function | () => {} |
beforePosition | 浮层定位完成前触发的事件 签名: Function() => void |
Function | - |
onPosition | 浮层定位完成后触发的事件 签名: Function(config: Object, node: Object) => void 参数: config: {Object} 定位的参数 node: {Object} 定位的元素 |
Function | () => {} |
autoFocus | 浮层打开的时候是否让里面的元素自动获取焦点 | Boolean | false |
hasMask | 是否显示遮罩 | Boolean | false |
cache | 隐藏时是否保留子节点 | Boolean | false |
safeNode | 安全节点,当点击document的时候, 如果包含该节点则不会关闭浮层, 如果是函数需要返回ref, 如果是字符串则是该DOM的id, 也可以直接传入DOM节点 | any | - |
wrapperClassName | 浮层的根节点的样式类 | String | - |
shouldUpdatePosition | 强制更新定位信息 | Boolean | - |
needAdjust | 是否自动调整定位的位置 | Boolean | - |
disableScroll | 是否禁用页面滚动 | Boolean | false |
子组件 InterDialog.Filter
包含主组件 InterDialog API,以下只列出差异
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
field | 过滤器所绑定的 Field
|
Field |
N/A |
selectKey | 当前面板中所选择的搜索条件 | `number | string` |
defaultSelectKey | 默认情况下面板所选择的搜索条件 | `number | string` |
searchPlaceholder | 搜索条件搜索框的提示语 | string |
"过滤搜索条件" |
searchCondition | 默认情况下搜索条件搜索框中的值 | `number | string` |
onChangeCondition | 切换面板左侧的搜索条件时触发的事件 | (selectedKey: string) => void |
默认不执行任何操作 |
onSearch | 在搜索条件搜索框中执行搜索操作时触发的事件 | `(searchCondition: string | number) => void` |
onReset | 点击重置按钮触发的事件 | (field: Field) => void |
默认不执行任何操作 |
onClear | 点击清空按钮触发的事件 | (field: Field) => void |
默认不执行任何操作 |
visible | 是否显示弹层, 如果此属性为 false ,弹层不会被渲染 |
boolean |
false |
title | 设定弹层标题 | `string | number` |
onOk | 点击确定按钮触发的事件 | (data: object[]) => void |
默认不执行任何操作 |
onCancel | 点击取消按钮触发的事件 | (e: object[]) => void |
默认不执行任何操作 |
loading | 设置弹层确定按钮载入状态 | boolean |
false |
disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |
子组件 InterDialog.Filter.Item
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
key | 作为条目的唯一标示,必须保证在同一个 TaskFilter 下唯一 | `string | number` |
title | 单个条目的标题 | string |
N/A |
visible | 该条目是否可见 | boolean |
N/A |
valuePlaceholder | 显示在标题后面的文案,一般展示用户填的值 | `string | number` |
子组件 InterDialog.Sorter
包含主组件 InterDialog API ,以下只列出差异
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
dataSource | 列表数据数据源(value 属性为唯一标识,不能出现重复) |
[{ text: string, value: any, deleteable:是否可被删除,draggable: 是否可被拖动排序}] |
[ ] |
deleteable | 是否禁用条目的删除功能 | boolean |
false |
draggable | 是否启用条目的拖动重排序功能 | boolean |
true |
title | 设定弹层标题 |
string 或 number
|
"排序设置" |
subTitle | 设置副标题,不设置不展示 | string |
null |
onOk | 点击确定按钮触发的事件 | (data: object[]) => void |
默认不执行任何操作 |
onCancel | 点击取消按钮触发的事件 | (e: object[]) => void |
默认不执行任何操作 |
loading | 设置弹层载入状态 | boolean |
false |
onDragStart | 用户开始进行拖动重排时触发的事件 | (params: { event: Event, node: OrderNode }) => void |
默认不执行任何操作 |
onDragEnter | 数据条目刚刚拖动到另一条目上时触发的条件 | (params: { event: Event, node: OrderNode }) => void |
默认不执行任何操作 |
onDragOver | 数据条目拖动过程中,当指针悬浮于另一条目上时,持续触发这一事件 | (params: { event: Event, node: OrderNode }) => void |
默认不执行任何操作 |
onDragLeave | 数据条目拖动过程中指针离开另一条目时触发的条件 | (params: { event: Event, node: OrderNode }) => void |
默认不执行任何操作 |
onDrop | 拖动重排结束时触发的事件 | (params: { event: Event, dragNode: OrderNode, dragNodesKeys: number, node: OrderNode, dropPosition: number, dropToGap: boolean }) => boolean |
默认不执行任何操作 |
canDrop | 某一数据条目是否可被拖动到另一数据条目之上 | (params: { dragNode: OrderNode, dragNodesKeys: number, node: OrderNode, dropPosition: number, dropToGap: boolean }) => boolean |
默认始终返回 true
|
onChange | 数据条目被重排或删除后触发的事件 | (data: object[]) => void |
默认不执行任何操作 |
showDelete | 是否展示条目前面的删除图表, 设置为 false 则无法删除 | boolean |
true |
disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |
快捷调用组件
InterDialog.alert 提示框
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 传入的标题 | String | null |
content | 传入展示的文案 | String/Element | null |
canCloseByMask | 是否允许点击遮罩层关闭提示框 | Boolean | false |
onOk | 点击确定按钮触发的函数 | Function | null |
icon | 展示在内容前面的图标,可以使用 Icon 的所有图标和自定义图标 | String | 提醒 icon |
disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |
InterDialog.confirm 确认框
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 传入的标题 | String | null |
content | 传入展示的文案 | String/Element | null |
canCloseByMask | 是否允许点击遮罩层关闭提示框 | Boolean | false |
onOk | 点击确定按钮触发的函数 | Function | null |
onCancel | 点击取消按钮触发的函数 | Function | null |
icon | 展示在内容前面的图标,可以使用 Icon 的所有图标和自定义图标 | String | 提问 icon |
disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |
InterDialog.warning 警告框
成员 | 说明 | 类型 | 默认值 |
---|---|---|---|
title | 传入的标题 | String | null |
content | 传入展示的文案 | String/Element | null |
canCloseByMask | 是否允许点击遮罩层关闭提示框 | Boolean | false |
onOk | 点击确定按钮触发的函数 | Function | null |
onCancel | 点击取消按钮触发的函数 | Function | null |
icon | 展示在内容前面的图标,可以使用 Icon 的所有图标和自定义图标 | String | 警告 icon |
disabledBackgroundBlur | 禁用内容层的模糊动画 | Boolean | false |
安全节点
弹层同时提供点击文档中的节点隐藏该弹层的功能,但是由于React内部维护了一个事件队列,且并未提供针对document的事件绑定方式,所以在点击任何一个节点 都会触发document的click,即便手动阻止冒泡也不行, Overlay采用了一个安全节点的设置来避免这个问题.
定位
-
align由空格隔开的字符串表示,例如
tl bl
. 其中tl
代表目标元素的左上方,bl
代表基准元素的左下方,所以tl bl
的意思是目标元素的左上方对齐基准元素左下方。 其中定位的可选值有tl
,tc
,tr
,cl
,cc
,cr
,bl
,bc
,br
. -
align支持的Boolean值仅为false,在设置为false的时候,不使用JS定位,这样你可以根据你的需要传入style或者className进行CSS定位。
说明 t
为top
的缩写,b
为bottom
的缩写,c
为center
的缩写,l
为left
的缩写,r
为right
的缩写.
更多内容可参考: overlay