67 lines
3.1 KiB
JSON
67 lines
3.1 KiB
JSON
{
|
||
"slug": "popover",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 popover：自己画了一枚触发按钮，点击切内部 open，content 是气泡里的文字，无插槽无事件。",
|
||
"usage": [
|
||
"触发按钮是模板里写死的「查看信息」（第 2 行），点击执行 `open = !open` 改的是 data 而不是 props 的 open。",
|
||
"气泡文字来自 `:content`（第 2 行 `{{ content }}`），没有默认插槽，放不进自定义节点。",
|
||
"`:open` 虽然声明了（第 12 行），但 data 里又声明了同名 open（第 14 行），模板读到的以后者为准，因此传 :open 无法控制展开。"
|
||
],
|
||
"bestPractices": [
|
||
"想要受控展开需要改实现：当前这份代码没有抛任何事件（全文无 $emit），父组件无法感知气泡的开合。",
|
||
"`:placement` 与 `:trigger` 在模板里没有任何绑定点，方向与触发方式都不会随传参改变，点击展开是写死的行为。",
|
||
"因为按钮文字是硬编码的，用来解释不同字段时会显得词不达意，实际接入建议直接换成自己的触发元素。"
|
||
],
|
||
"a11y": [
|
||
"触发按钮带 `:aria-expanded=\"open\"`（第 2 行），展开状态可被读屏感知，这是该实现里唯一到位的无障碍属性。",
|
||
"气泡本身只有 role=\"dialog\" 没有 aria-label 或 aria-labelledby，且打开后焦点不移动，读屏用户可能读不到内容。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体名义上是 props 块 4 项（content/placement/trigger/open，frameworks/Popover.vue2.vue:8-13），其中只有 content 与 data 版 open 真正进入渲染；无事件与插槽。",
|
||
"table": [
|
||
{
|
||
"name": "content",
|
||
"type": "String",
|
||
"desc": "内容（契约：状态：default / hover / focus / disabled；含弹）（frameworks/Popover.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "open",
|
||
"type": "(val: any) => void",
|
||
"desc": "展开时触发（frameworks/Popover.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"type": "属性",
|
||
"desc": "实现声明了这个 prop（String，默认 bottom，注释「弹出位置」），模板未做任何绑定（frameworks/Popover.vue2.vue:10）"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"type": "属性",
|
||
"desc": "实现声明了这个 prop（String，默认 click，注释「触发方式」），模板未做任何绑定（frameworks/Popover.vue2.vue:11）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Popover.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Popover.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"popover-ex-1",
|
||
"popover-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/Popover.vue2.vue:9-12；data 第 14 行的 open 与第 12 行同名，模板第 2 行的 v-if 与 @click 都落在 data 版。",
|
||
"全文无 $emit，也没有 <slot>，因此开合状态无法外传。"
|
||
]
|
||
}
|