3.1 KiB
3.1 KiB
Tooltip 浮层提示
示例
风格
可选的风格 ui 属性值：alt。
定位
使用 position 属性来指定浮层显示的位置。
触发时机
使用 trigger 属性来指定显示/隐藏浮层的时机。
API
属性
| 名称 | 类型 | 默认值 | 描述 |
|---|---|---|---|
ui |
string= |
- | [^ui] |
open |
boolean |
false |
[^open] |
target |
`string | Vue | Node` |
position |
string |
'top' |
[^position] |
aim-center |
boolean |
false |
指定浮层提示箭头是否始终指向目标元素中心。 |
trigger |
string |
'hover' |
[^trigger] |
interactive |
boolean |
true |
浮层内容是否允许交互。如果为 false 则在 target 外满足 trigger 指定的条件浮层即自动关闭。 |
autofocus |
boolean |
- | 是否自动抢占焦点到浮层内的第一个可聚焦元素。 |
hide-delay |
number |
tooltip.hideDelays |
触发关闭条件满足后延迟关闭等待时间的毫秒数。可以用来防止光标移出 target 后移入浮层进行交互前已经自动关闭。 |
overlay-class |
`string | Array | Object=` |
overlay-style |
`string | Array | Object=` |
^^^ui 预设样式。
+++枚举值
| 值 | 描述 |
|---|---|
reverse |
反色样式。 |
s |
小尺寸样式。 |
m |
中尺寸样式。 |
| +++ | |
| ^^^ |
^^^open
:::badges
.sync
:::
是否显示浮层提示。 ^^^
^^^position
指定定位参数。使用 Popper.js 风格的定位语法指定，可参考 Popper.placements。
^^^
^^^trigger
触发浮层提示的方式。支持指定的值为 v-outside 指令绑定值的 trigger 参数，并支持使用 `${open}-${close}` 语法分别指定触发打开/关闭提示的时机。另外，当 trigger 指定为 custom 时，将不会使用 v-outside 功能自动进行处理。
例如：click 表示点击 target 后打开，在空白处点击时关闭；hover-mousedown 表示光标移入 target 后打开，在空白处按下鼠标时关闭。
^^^
插槽
| 名称 | 描述 |
|---|---|
default |
浮层提示内容。 |
事件
| 名称 | 描述 |
|---|---|
toggle |
[^event-toggle] |
^^^event-toggle
:::badges
v-model
:::
浮层提示展开状态切换时触发，回调参数为 (open: boolean)。
^^^
全局配置
| 配置项 | 类型 | 默认值 | 描述 |
|---|---|---|---|
tooltip.hideDelay |
number |
300 |
见 hide-delay 属性。 |