75 lines
3.3 KiB
JSON
75 lines
3.3 KiB
JSON
{
|
||
"slug": "tooltip",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 文字提示：悬停或聚焦时在元素旁展示一句补充说明。",
|
||
"usage": [
|
||
"defineProps 声明 tooltip/placement/trigger，触发器与提示通过 aria-describedby=\"kole-tooltip-tip\" 关联；声明的 show/hide 两个事件当前无触发点（Tooltip.vue3.vue:12）。",
|
||
"提示元素带 role=\"tooltip\" 并通过按钮上的 aria-describedby=\"kole-tooltip-tip\" 建立关联（Tooltip.vue3.vue:2）。",
|
||
"触发按钮文案固定为「悬停或聚焦」，不接受插槽定制触发器（Tooltip.vue3.vue:2）。",
|
||
"声明了 show 与 hide 两个事件，但模板里没有触发点，二者当前不会被发出（Tooltip.vue3.vue:12）。",
|
||
"placement / trigger 声明后未参与渲染，显隐与方向由样式文件（如 :hover / :focus 规则）决定（Tooltip.vue3.vue:9）。"
|
||
],
|
||
"bestPractices": [
|
||
"placement 与 trigger 当前是空壳：传 top 或 click 不会改变提示方向与触发方式，实际行为完全取自 CSS（Tooltip.vue3.vue:9）。",
|
||
"id 是写死的 kole-tooltip-tip，同页多个 Tooltip 会出现重复 id 并使 aria-describedby 指向第一个，多个提示并存前需确认这一点（Tooltip.vue3.vue:2）。",
|
||
"show / hide 声明未实现，需要埋点或延迟控制时应自行包一层元素监听鼠标事件（Tooltip.vue3.vue:12）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端已有 aria-describedby 与 role=\"tooltip\" 关联，但 placement/trigger 与 show/hide 事件均声明未实现，属于半实现状态。",
|
||
"table": [
|
||
{
|
||
"name": "tooltip",
|
||
"type": "String",
|
||
"desc": "提示文本，默认「这是补充说明」"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"type": "String",
|
||
"desc": "弹出位置，默认 top；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"type": "String",
|
||
"desc": "触发方式，默认 hover；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "show",
|
||
"type": "emit(declared only)",
|
||
"desc": "声明了该事件但模板内没有触发点"
|
||
},
|
||
{
|
||
"name": "hide",
|
||
"type": "emit(declared only)",
|
||
"desc": "声明了该事件但模板内没有触发点"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"按钮与提示之间已有 aria-describedby 关联且提示带 role=\"tooltip\"，读屏可在聚焦时读到说明，是本库中语义较完整的一例（Tooltip.vue3.vue:2）。",
|
||
"提示本身没有 aria-live，由 CSS hover 控制显隐时读屏获取时机取决于浏览器；关键信息不要只放在提示里（Tooltip.vue3.vue:2）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Tooltip.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "tooltip 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/Tooltip.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"tooltip-ex-1",
|
||
"tooltip-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Tooltip.vue3.vue:2 — 触发器与提示的可访问性关联",
|
||
"frameworks/Tooltip.vue3.vue:2 — 提示元素的 role",
|
||
"frameworks/Tooltip.vue3.vue:12 — 声明 show/hide 但无触发点"
|
||
]
|
||
}
|