category: Components type: UI Views component: Basic chinese: 弹层 english: TaskOverlay

七巧板基础弹层组件。

API

TaskOverlay

| 成员 | 说明 | 类型 | 默认值 | | ----- | ----- | ----- | ----- | | visible | 是否显示弹层, 如果此属性为 false，弹层不会被渲染 | boolean | false | | width | 设定弹层宽度 | number | N/A | | height | 设定弹层高度 | number | N/A | | onOk | 点击确定按钮触发的事件，如果重写了 Footer 则无效 | (e: Event) => void | 默认不执行任何操作 | | onCancel | 点击取消按钮触发的事件，如果重写了 Footer 则无效 | (e: Event) => void | 默认不执行任何操作 | | loading | 设置弹层载入状态 | boolean | false | | showTitle | 是否显示标题 | boolean | true | | showFooter | 是否显示弹层底部的按钮栏 | boolean | true | | title | 设定弹层标题 | string 或 number | N/A | | hasMask | 是否显示遮罩 | boolean | true | | prefix | 样式类名的品牌前缀 | string | "next-" | | className | 自定义类名 | string | N/A | | canCloseByEsc | 是否支持 esc 按键关闭弹层 | boolean | true | | canCloseByOutSideClick | 点击弹层外的区域是否关闭弹层 | boolean | true | | canCloseByMask | 点击遮罩区域是否关闭弹层 | boolean | true | | animation | 配置动画的播放方式 | object 或 boolean | { "in": "expandInDown", "out": "expandOutUp" } | | target | 配置弹层定位的参照元素 | any | Position.VIEWPORT，即浏览器页面窗口 | | align | 弹层相对于target的定位, 用法同 Overlay 组件的 定位 | string 或 boolean | "cc cc" | | offset | 弹层相对于target定位的微调 | number[2] | [0, 0] | | beforeClose | 弹层关闭前触发的事件 | () => void | 默认不执行任何操作 | | onClose | 弹层关闭后触发的事件 | () => void | 默认不执行任何操作 | | afterClose | 弹层关闭后触发的事件, 如果有动画，则在动画结束后触发 | () => void | 默认不执行任何操作 | | beforeOpen | 弹层打开前触发的事件 | () => void | 默认不执行任何操作 | | onOpen | 弹层打开后触发的事件 | () => void | 默认不执行任何操作| | afterOpen | 弹层打开后触发的事件, 如果有动画，则在动画结束后触发 | () => void | 默认不执行任何操作 | | onRequestClose | 弹层请求关闭触发的事件。参数: reason: string 弹层关闭的来源 e: Event DOM 事件 | (reason: string, e: Event) => void | 默认不执行任何操作 | | beforePosition | 弹层定位完成前触发的事件 | () => void | 默认不执行任何操作 | | onPosition | 弹层定位完成后触发的事件。参数: config: object 定位的参数 node: object 定位的元素 | (config: object, node: object) => void | 默认不执行任何操作 | | autoFocus | 弹层打开的时候是否让里面的元素自动获取焦点 | boolean | false | | cache | 隐藏时是否保留子节点 | boolean | false | | safeNode | 安全节点,当点击 document 的时候, 如果包含该节点则不会关闭弹层, 如果是函数需要返回 ref, 如果是字符串则是该DOM的 id, 也可以直接传入DOM节点 | any | N/A | | wrapperClassName | 弹层的根节点的样式类 | string | N/A | | container | 指定渲染组件的容器 | any | N/A | | shouldUpdatePosition | 强制更新定位信息 | boolean | N/A | | needAdjust | 是否自动调整定位的位置 | boolean | N/A | | disableScroll | 是否禁用页面滚动 | boolean | true |

TaskOverlay.Setting

设置按钮插槽，位于弹层右上角，要求只有一个元素。

TaskOverlay.Content

内容区。

TaskOverlay.Footer

底部区域。