Popover 弹出气泡
点击/鼠标移入元素，弹出气泡式的卡片浮层。在内容周围弹出一些隐藏的信息。和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
演示
基础用法
最简单的用法，通过 content 传递浮层内容。
触发方式
两种触发方式：鼠标移入[hover]、点击[click]；通过 trigger 属性设置触发方式。
位置
有 12 个弹出位置。通过 placement 属性设置弹出位置。
非受控模式
不需要自动弹出，需要进行手动控制是否展示；通过传递 visible 属性设置是否展示，然后设置 to 属性指向弹层对标节点。
不显示箭头
通过传递 show-arrow 为 false 来取消箭头显示
API
Popover Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
trigger | 触发方式, manual 非受控模式, 手动调用 show 显示, hide 隐藏 | hover、click、manual | hover |
content | 显示内容, 也可以通过 default-slot 显示 | string | - |
placement | 弹出位置 | top-start、top、top-end、left-start、left、left-end、right-start、right、right-end、bottom-start、bottom、bottom-end | top |
reference | 非受控模式, 手动指定目标元素 | HTMLElement | string | Ref<HTMLElement> | - |
destroy-on-hide | 隐藏时销毁 DOM 结构; false 隐藏时未销毁只是设置 display: none | boolean | false |
Popover Slots
| 名称 | 说明 |
|---|---|
default | 自定义内容 |
trigger | 自定义触发元素 |
Popover Exposes
| 名称 | 说明 | 类型 |
|---|---|---|
hide | 隐藏弹层 | () => void |
show | 非受控模式, 显示弹层 | (reference?: HTMLElement | string | Ref<HTMLElement>) => void |
isShow | 是否显示 | () => boolean |
toggle | 非受控模式, 切换弹层显示或隐藏 | (reference?: HTMLElement | string | Ref<HTMLElement>) => void |
updatePosition | 更新弹层位置 | (reference?: HTMLElement | string | Ref<HTMLElement>) => void |