61 lines
2.8 KiB
JSON
61 lines
2.8 KiB
JSON
{
|
||
"slug": "tooltip",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 tooltip：按钮与提示文字是模板固定结构，tooltip 只填文字，显示与隐藏完全交给 CSS。",
|
||
"usage": [
|
||
"提示文字来自 `:tooltip`（第 2 行 `{{ tooltip }}`），触发按钮的文字「悬停或聚焦」是写死的，无法通过 prop 修改。",
|
||
"`:placement` 与 `:trigger` 在模板里没有任何绑定点，方向与触发方式都不随传参改变，无事件也无暂停控制。",
|
||
"`:tooltip` 渲染出的气泡 span 是常驻 DOM 的（第 2 行没有 v-if），显示与否靠 .kole-tooltip-tip 的 CSS，读屏始终能拿到这段文字。"
|
||
],
|
||
"bestPractices": [
|
||
"按钮与提示通过固定的 id 关联：aria-describedby=\"kole-tooltip-tip\" 指向写入在模板里的同名 id（第 2 行），因此同页放多个会让 id 重复、关联错乱。",
|
||
"组件不抛任何事件（全文无 $emit），无法感知展示与隐藏，需要埋点或联动时得换别的实现。"
|
||
],
|
||
"a11y": [
|
||
"提示 span 带 role=\"tooltip\" 且按钮用 aria-describedby 指过去（第 2 行），语义关联是正确的，键盘聚焦按钮即可读出提示。",
|
||
"因为 id 写死在实现里，同页多实例会产生重复 id，屏幕阅读器可能指向错误的气泡，建议同页只放一个。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体名义上是 props 块 3 项（tooltip/placement/trigger，frameworks/Tooltip.vue2.vue:8-12），其中只有 tooltip 进入渲染；无事件与插槽。",
|
||
"table": [
|
||
{
|
||
"name": "placement",
|
||
"type": "属性",
|
||
"desc": "实现声明了这个 prop（String，默认 top，注释「弹出位置」），模板未做任何绑定（frameworks/Tooltip.vue2.vue:10）"
|
||
},
|
||
{
|
||
"name": "tooltip",
|
||
"type": "String",
|
||
"desc": "提示浮层内容（frameworks/Tooltip.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"type": "属性",
|
||
"desc": "实现声明了这个 prop（String，默认 hover，注释「触发方式」），模板未做任何绑定（frameworks/Tooltip.vue2.vue:11）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Tooltip.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Tooltip.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"tooltip-ex-1",
|
||
"tooltip-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/Tooltip.vue2.vue:9-11；模板第 2 行只消费 tooltip，静态 id 与 aria-describedby 也在这一行。",
|
||
"全文无 $emit 与 <slot>，显示逻辑由样式承担，故无展示/隐藏事件可用。"
|
||
]
|
||
}
|