Popup 弹出层

从屏幕滑出或弹出一块自定义内容区

何时使用

用于展示弹窗、信息提示、选择输入、切换等内容,支持多个弹出层叠加展示

注意事项

  • maskClosable 为 false 时,onClose 函数不触发

代码示例

基本使用

属性

属性类型必填默认值说明
visibleboolean否false是否显示
maskClosableboolean否false点击蒙层是否可以关闭
showCloseIconboolean否false是否展示关闭图标
disableScrollboolean否true弹窗展示时,是否禁止页面滚动
autoHeightboolean否false是否自适应内容区高度
animationboolean否true是否开启过渡动画
durationnumber否300过渡动画时长,单位毫秒
position'center' | 'top' | 'bottom' | 'left' | 'right'否'center'弹窗布局
zIndexnumber否998弹窗层级
classNamestring否-类名

事件

事件名说明类型
onClose弹窗关闭时,触发回调( visible: boolean ) => void

样式类

类名说明
amd-popup整体样式
amd-popup-mask遮罩层样式
amd-popup-disable-scroll禁用滚动样式
amd-popup-animation开启过渡动画样式
amd-popup-content内容样式
amd-popup-top内容样式
amd-popup-bottom内容样式
amd-popup-left内容样式
amd-popup-right内容样式
amd-popup-center内容样式
amd-popup-close-container关闭图标区域样式
amd-popup-close-container关闭图标样式