搭建和配置弹窗组件-多端低代码开发平台魔笔-阿里云

简介

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用弹窗在当前页面正中打开一个浮层，承载相应的操作。

更多信息可查看弹窗与抽屉。

配置项

分类	配置	示例	说明
展示区域	顶部		是否展示弹窗顶部标题。
展示区域	底部		是否展示弹窗底部操作栏。
交互	点击遮罩关闭		开启时，点击遮罩将默认触发`cancel` 事件。
	ESC关闭		开启时，按下 ESC 将默认触发`cancel` 事件。
	动画形式		弹窗在打开或关闭时的动画形式，默认为缩放效果。
	关闭后销毁子节点		默认情况下，弹窗关闭时会销毁其中的子节点。区别例子：如果弹窗内有 Image 组件，销毁子节点会导致每次打开弹窗时重新请求图片资源；而保留子节点时，只有第一次打开弹窗会请求图片资源，之后再次打开则不会。
样式	隐藏弹窗		控制弹窗的默认展示状态，为`true` 时将隐藏展示弹窗。该配置对应的组件属性值为`hidden`，在调用`show`方法时，hidden 状态将为 false。调用`toggleHidden`时，hidden 状态将取反。
	尺寸		设置弹窗的展示尺寸。在移动页面时，页面宽度不足以展示弹窗内容时，弹窗宽度将自适应。
	显示遮罩		是否显示遮罩。
	显示关闭按钮		是否展示弹窗左上角的关闭按钮。
CSS 样式	背景色		弹窗背景色，详情参见通用属性。
	内边距		弹窗内边距，详情参见通用属性。
	圆角		弹窗圆角，详情参见通用属性。
	顶部背景色		顶部区域背景色，详情参见通用属性。
	顶部外边距		顶部区域外边距，详情参见通用属性。
	内容区背景色		内容区背景色，详情参见通用属性。
	内容区外边距		内容区外边距，详情参见通用属性。
	底部背景色		底部区域背景色，详情参见通用属性。
	底部外边距		底部区域外边距，通用属性。
	关闭按钮上边距		关闭按钮距离内容区域的上边距
	关闭按钮右边距		关闭按钮距离内容区域的右边距

属性与方法

名称	类型	示例	说明
hidden	boolean	`modalFrame.hidden`	当前组件是否隐藏
hide	func	`modalFrame.hide()`	隐藏弹窗
show	func	`modalFrame.show()`	展示弹窗
toggleHidden	func	`modalFrame.toggleHidden()`	切换弹窗隐藏状态

事件回调

配置	说明
	点击遮罩、关闭按钮或按下 ESC 时将共同触发的事件。新增的弹窗默认将触发`hide`方法。
	在弹窗显示动画完成后将触发的事件
	在弹窗关闭动画完成后将触发的事件

场景示例

服务协议场景
- 配置：删除“点击遮罩、关闭按钮或按下 ESC”事件，同时“显示遮罩”、“不展示关闭按钮”。
- 在此配置下，用户需选择“暂不使用”或“同意”两个按钮其一，进行下一步操作，否则弹窗无法关闭。在搭建上，再针对操作按钮编写进一步的业务逻辑。