主题
tooltips 气泡框
使用
import { KTooltips } from "@ksware/ksw-ux";
常用于展示鼠标 hover
时的提示信息。
基础用法
在这里我们提供 9
种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果。
使用 content
属性来决定 hover
时的提示信息。 由 placement
属性决定展示效果: placement
属性值为:[方向]-[对齐位置];四个方向:top
、left、right
、bottom
;三种对齐位置:start
, end
,默认为空。 如 placement="left-end"
,则提示信息出现在目标元素的左侧,且提示信息的底部与目标元素的底部对齐。
自定义颜色
使用color
属性来自定义气泡框的颜色, 使用textColor
属性来自定义提示信息的颜色。
主题
Tooltip
组件内置了两个主题:dark
和light
。
TIP
暂不支持自定义主题
通过设置 effect
来修改主题,默认值为 dark
.
更多内容的文字提示
展示多行文本或者是设置文本内容的格式
用具名 slot content
,替代tooltip
中的content
属性。
高级扩展
除了这些基本设置外,还有一些属性可以让使用者更好的定制自己的效果:
transition
属性可以定制显隐的动画效果,默认为fade-in-linear
。
如果需要关闭 tooltip
功能,disabled
属性可以满足这个需求, 你只需要将其设置为 true
。
事实上,Tooltip
是一个基于 KPopper
的扩展,您可以使用 KPopper
中允许的任何属性。
TIP
Tooltip
内不支持 router-link
组件,请使用 vm.$router.push
代替。
tooltip
内不支持 disabled form
元素,参考 MDN, 请在 disabled form
元素外层添加一层包裹元素。
显示 HTML 内容
内容属性可以设置为 HTML
字符串。
WARNING
content
属性虽然支持传入 HTML
片段,但是在网站上动态渲染任意 HTML
是非常危险的,因为容易导致XSS 攻击。 因此在 raw-content
打开的情况下,请确保 content
的内容是可信的,永远不要将用户提交的内容赋值给 content
属性。
虚拟触发
有时候我们想把 tooltip
的触发元素放在别的地方,而不需要写在一起,这时候就可以使用虚拟触发。
TIP
需要注意的是,虚拟触发的 tooltip
是受控组件,因此你必须自己去控制 tooltip
是否显示,你将无法通过点击空白处来关闭 tooltip
。
单例模式
Tooltip 可以作为单例,也就是是说你可以同时有多个触发同一个 tooltip 的触发元素,这个功能是在 虚拟触发 的基础上开发的。
TIP
已知问题:使用单例模式时,弹出窗口会从意料之外的位置弹出。
受控模式
Tooltip
可以通过父组件使用 :visible
来控制它的显示与关闭。
自定义动画
Tooltip
可以自定义动画,你可以根据需要自行设置所需的动画方法。
API
Props
参数名 | 描述 | 类型 | 默认值 |
---|---|---|---|
type | tooltip 类型 | enum | - |
effect | Tooltip 主题,内置了 dark / light 两种,未设置 type 或 color 属性时生效 | enum | 'dark' |
content | tooltip 内容 | string | - |
raw-content | content 中的内容是否作为 HTML 字符串处理 | boolean | false |
placement | tooltip 位置 | enum | bottom |
fallback-placements | Tooltip 可用的 positions 请查看 popper.js 文档 | array | - |
visible/v-model:visible | tooltip 是否可见 | boolean | '' |
disabled | tooltip 是否禁用 | boolean | false |
offset | tooltip 位置偏移量 | number | 12 |
transition | 动画名称 | string | - |
popper-options | Tooltip 可用的 positions 请查看 popper.js 参数 | object | {} |
show-after | tooltip 显示延迟时间,单位为毫秒 | number | 0 |
hide-after | tooltip 隐藏延迟时间,单位为毫秒 | number | 200 |
show-arrow | 是否显示箭头 | boolean | true |
auto-close | tooltip 出现后自动隐藏延时,单位毫秒 | number | 0 |
color | tooltip 填充色 | string | - |
text-color | tooltip 文字颜色 | string | - |
popper-style | popper 样式 | object | - |
popper-class | popper 类名 | string | '' |
enterable | 鼠标是否可进入到 tooltip 中 | boolean | true |
teleported | 是否使用 teleport。设置成 true 则会被追加到 append-to 的位置 | boolean | true |
trigger | 触发方式 | enum | hover |
virtual-triggering | 是否使用虚拟触发 | boolean | false |
virtual-ref | 虚拟触发的元素 | HTMLElement | - |
trigger-keys | 当鼠标点击或者聚焦在触发元素上时, 可以定义一组键盘按键并且通过它们来控制 Tooltip 的显示 | array | ['Enter','Space'] |
persistent | 当 tooltip 组件长时间不触发且 persistent 属性设置为 false 时, popconfirm 将会被删除 | boolean | - |
aria-label | 和 aria-label 属性保持一致 | string | - |
Slots
插槽名 | 描述 | 参数 |
---|---|---|
default | Tooltip触发 & 引用的元素 | - |
content | 自定义内容 | - |
Methods
方法名 | 描述 | 类型 |
---|---|---|
popperRef | element-plus 的 el-popper 组件实例 | object |
contentRef | element-plus 的 el-tooltip-content 组件实例 | object |
isFocusInsideContent | 验证当前焦点事件是否在 el-tooltip-content 中触发 | Function |
updatePopper | 更新 el-popper 组件实例 | Function |
onOpen | 控制 tooltip 显示状态 | Function |
onClose | 控制 tooltip 显示状态 | Function |
hide | 隐藏 tooltip | Function |