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 | N/A | | defaultSelectKey | 默认情况下面板所选择的搜索条件 | number|string | N/A | | 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 | N/A | | title | 单个条目的标题 | string | N/A | | visible | 该条目是否可见 | boolean | N/A | | valuePlaceholder | 显示在标题后面的文案，一般展示用户填的值 | string|number | N/A |

子组件 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采用了一个安全节点的设置来避免这个问题.

定位

1. align由空格隔开的字符串表示，例如 tl bl. 其中tl代表目标元素的左上方，bl代表基准元素的左下方，所以tl bl的意思是目标元素的左上方对齐基准元素左下方。 其中定位的可选值有 tl, tc, tr, cl, cc, cr, bl, bc, br.

2. align支持的Boolean值仅为false，在设置为false的时候，不使用JS定位，这样你可以根据你的需要传入style或者className进行CSS定位。

说明 t为top的缩写，b为bottom的缩写，c为center的缩写，l为left的缩写，r为right的缩写.

更多内容可参考: overlay