Tune UI弹出框组件
弹出框组件用于在元素附近弹出一个轻量级的提示框，可以包含各种自定义内容。常用于展示提示信息、操作菜单、详细说明等。
基础用法
基础的弹出框，提供了hover和click两种触发方式。
弹出框组件支持hover和click两种触发方式，可以根据实际需求选择合适的交互方式。
显示代码
分组用法
可以将弹出框应用于一组元素，同时管理它们的弹出行为。
将弹出框应用于一组元素，这些元素共享同一个弹出内容，适用于组合按钮等场景。
按钮组弹出
菜单项弹出
提示：当一组元素需要共享同一个弹出内容时，可以将它们包装在同一个t-popover组件内部。
显示代码
弹出位置
支持四个方向弹出：上、右、下、左，可以根据页面空间选择合适的弹出方向。
弹出框支持四个方向弹出，可以根据页面空间选择合适的弹出方向。
弹出位置
应用场景
- top（上）：适用于按钮位于底部区域的场景
- right（右）：适用于按钮位于左侧区域的场景
- bottom（下）：适用于按钮位于顶部区域的场景
- left（左）：适用于按钮位于右侧区域的场景
通过 position 属性设置弹出位置
显示代码
自定义样式
可以自定义弹出框的宽度、圆角、内边距、阴影等样式。
可以自定义弹出框的宽度、圆角、内边距、阴影等样式，以满足不同的设计需求。
自定义宽度和圆角
自定义内边距
自定义阴影
无箭头样式
自定义间距
样式配置项：
width：设置弹出框宽度radius：设置弹出框圆角padding：设置弹出框内边距box-shadow：设置弹出框阴影show-arrow：控制是否显示箭头gap：设置弹出框与触发元素的间距
显示代码
自定义内容
可以通过插槽自定义弹出框的内容，支持任意HTML结构。
弹出框支持通过插槽自定义内容，包括标题、内容和底部区域。
可用插槽
default：触发元素title：自定义标题区域content：自定义内容区域footer：自定义底部区域
显示代码
触发配置
支持多种交互方式配置，如延迟隐藏、按ESC键关闭、点击其他区域关闭等。
弹出框支持多种触发方式，包括悬停、点击、聚焦和手动触发。
悬停触发 (hover)
点击触发 (click)
聚焦触发 (focus)
手动触发 (manual)
悬停延迟 (delay)
触发方式属性
type：指定触发方式，可选值为hover、click、focus、manualhover-delay：悬停触发的显示延迟时间，单位为毫秒hide-delay：悬停触发的隐藏延迟时间，单位为毫秒visible：手动控制弹出框显示状态（仅在type="manual"时生效）
显示代码
遮罩层
可以为弹出框添加遮罩层，提供更聚焦的交互体验。
弹出框可以配置模态遮罩层，使其具有类似对话框的效果。
模态遮罩属性
modal：设置为true开启模态遮罩背景close-on-modal-click：设置为false可以阻止点击遮罩层关闭modal-opacity：设置遮罩层的透明度，默认为0.5
显示代码
事件处理
弹出框提供了多种事件，用于监听鼠标进入、离开、状态变化等。
弹出框组件提供了多种事件，用于监听鼠标进入、离开、显示状态变化等。
支持的事件
hover-enter：鼠标进入触发元素时触发hover-out：鼠标离开触发元素时触发model-change：弹出框显示状态变化时触发open：弹出框打开时触发close：弹出框关闭时触发click-model：点击遮罩层时触发（在有遮罩层时有效）
显示代码
弹出框 API
TPopover 属性
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
width | 弹出框宽度 | string / number | — | — |
disabled | 是否禁用 | boolean | true / false | false |
type | 触发方式 | string | hover / click / none | hover |
content | 显示内容 | string | — | — |
radius | 圆角大小 | array / number | — | 4 |
padding | 内边距大小 | array / number | — | [8, 12, 8, 12] |
box-shadow | 阴影配置 | array | — | — |
gap | 弹出框与触发元素的间距 | number | — | 10 |
hide-after | 隐藏延迟时间(毫秒) | number | — | 0 |
position | 弹出位置 | string | top / right / bottom / left | top |
append-to | 渲染的目标位置 | string / element | — | body |
auto-position | 是否自动调整位置 | boolean | true / false | true |
show-arrow | 是否显示箭头 | boolean | true / false | true |
custom | 自定义位置坐标 | object {x: number, y: number} | — | — |
dialog-animation | 是否使用对话框动画 | boolean | true / false | false |
drawer-animation | 是否使用抽屉动画 | boolean | true / false | false |
close-on-press-escape | 是否支持ESC键关闭 | boolean | true / false | false |
close-on-press-other | 是否点击其他区域关闭 | boolean | true / false | false |
is-modal | 是否显示遮罩层 | boolean | true / false | false |
is-modal-nest | 是否允许遮罩层嵌套 | boolean | true / false | false |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
click-model | 点击遮罩层时触发 | — |
hover-enter | 鼠标进入时触发 | (el: HTMLElement) |
hover-out | 鼠标离开时触发 | (el: HTMLElement) |
model-change | 显示状态改变时触发 | — |
open | 弹出框打开时触发 | — |
close | 弹出框关闭时触发 | — |
插槽
| 插槽名 | 说明 | 作用域参数 |
|---|---|---|
default | 触发弹出框显示的元素 | — |
content | 弹出框内容 | — |
样式变量
| 变量名 | 说明 |
|---|---|
$popover-bg-color | 弹出框背景色 |
$popover-text-color | 弹出框文字颜色 |
$popover-border-radius | 弹出框圆角 |
$popover-shadow | 弹出框阴影 |
$popover-arrow-size | 弹出框箭头大小 |
| </rewritten_file> |