# 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 点击保存时触发 -

# 插槽

名称 说明
default 弹出层内容