@alicd/crui-inter-dialog

0.0.46 • Public • Published

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 设定弹层标题 stringnumber "排序设置"
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定位。

说明 ttop的缩写,bbottom的缩写,ccenter的缩写,lleft的缩写,rright的缩写.

更多内容可参考: overlay

Dependencies (4)

Dev Dependencies (37)

Package Sidebar

Install

npm i @alicd/crui-inter-dialog

Weekly Downloads

2

Version

0.0.46

License

ISC

Unpacked Size

5.48 MB

Total Files

44

Last publish

Collaborators

  • hahaiwin
  • snowden_
  • vincent.ljq
  • zhen.hz
  • cismous
  • juntao.wjt
  • xiongqi
  • mingche_286130
  • joshuasui
  • mmpc
  • 0little
  • yf871020
  • zyy7259
  • later_7
  • qijian1990
  • gepik
  • jimmyxuster
  • helloljq
  • rentj1
  • js8zq332
  • xiaobc