Gitee
Appearance
Popup 弹出框
弹出框在页面中动态弹出，覆盖在现有界面之上，用于展示信息、提示、选项菜单、确认对话框等内容，而不会打断用户的当前任务流。
基础用法
通过show属性来控制弹出框的显示与隐藏。
位置
通过position属性来设置弹出框的位置。
无遮罩
通过overlay属性来设置是否显示遮罩。
属性
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| show | boolean | false | 是否显示 |
| width | string | -- | 宽度 |
| height | string | -- | 高度 |
| position | string | center | 位置 |
| duration | number | -- | 动画持续时间 |
| zIndex | number | -- | 高度 |
| className | string | -- | 类名 |
| overlayClass | string | -- | 遮罩类名 |
| overlayStyle | string | -- | 遮罩样式 |
| transition | string | -- | 过渡效果 |
| useNativeBack | boolean | false | 使用原生返回 |
| teleport | string | -- | 动画位置 |
| overlay | boolean | true | 是否启用遮罩 |
| closeOnClickOverlay | boolean | true | 点击遮罩时是否关闭 |
| lockScroll | boolean | true | 是否锁定滚动 |
| round | boolean | false | 是否启用圆角 |
| useClickAway | boolean | true | 外部区域事件件 |
事件
| 事件名 | 参数 | 说明 |
|---|---|---|
| click | event: Event | 点击事件 |
| opened | event: Event | 打开事件 |
| closed | event: Event | 关闭事件 |
| update:show | event: Event | 变化事件 |
插槽
| 名称 | 说明 |
|---|---|
| default | 内容 |
CSS 变量
| 名称 | 默认值 | 说明 |
|---|---|---|
| --fm-popup-background | var(--fm-white) | -- |
| --fm-popup-zindex | var(--fm-zindex-3) | -- |
| --fm-popup-radius | 16px | -- |