@alicd/crui-inter-dialog NPM

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

定位

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

walle component react

@alicd/next-dom classnames onfire.js react-addons-transition-group

@infinitebrahmanuniverse/nolb-_alicd @everything-registry/sub-chunk-43 @alicd/crui-top-nav @alicd/crui @zalastax/nolb-_alicd

0.0.46

5 years ago