Popper 弹出层
基于 Floating UI (opens new window) 的弹出层组件,支持自动定位、翻转和偏移。
何时使用
- 需要弹出浮动面板展示内容时
- 需要基于触发元素精确定位弹出层时
- 组件内部使用(如 StaffSelect、RelevanceSelect 的弹出面板)
代码演示
API
| 参数 | 说明 | 类型 | 默认值 |
| visible | 是否显示 | boolean | false |
| trigger | 触发元素 | HTMLElement | null |
| placement | 弹出位置 | Placement | 'bottom-start' |
| offset | 偏移量 | number | 8 |
| strategy | 定位策略 | 'absolute' \| 'fixed' | 'absolute' |
| zIndex | 层级 | number | 1000 |
| width | 宽度 | string \| number | 'auto' |
| height | 高度 | string \| number | 'auto' |
| showArrow | 是否显示箭头 | boolean | true |
| autoUpdate | 是否自动更新位置 | boolean | true |
| footer | 是否显示底部按钮 | boolean | true |
| cancelText | 取消按钮文字 | string | '取消' |
| saveText | 保存按钮文字 | string | '保存' |
Placement 可选值
top top-start top-end bottom bottom-start bottom-end left left-start left-end right right-start right-end
事件
| 事件名 | 说明 | 回调参数 |
| show | 显示时触发 | - |
| hide | 隐藏时触发 | - |
| cancel | 点击取消时触发 | - |
| save | 点击保存时触发 | - |
插槽