80 lines
3.3 KiB
JSON
80 lines
3.3 KiB
JSON
{
|
||
"slug": "popover",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 气泡卡片：点击触发的小浮层，用于放解释、统计或轻量操作。",
|
||
"usage": [
|
||
"open 是入参也是内部 ref 初值（const open = ref(Boolean(props.open))），点击按钮就地取反，属于非受控实现（Popover.vue3.vue:14）。",
|
||
"弹层带 role=\"dialog\"，触发器通过 :aria-expanded=\"open\" 表达展开态（Popover.vue3.vue:2）。",
|
||
"content 是浮层内的纯文本内容，默认一句解释文案（Popover.vue3.vue:8）。",
|
||
"声明了 open 与 close 两个事件，但模板里没有触发点，二者当前不会被发出（Popover.vue3.vue:13）。",
|
||
"placement 与 trigger 声明后未参与渲染，浮层方向与触发方式取决于样式（Popover.vue3.vue:9）。"
|
||
],
|
||
"bestPractices": [
|
||
"因为内部 open 只在初始化时读 props.open，父组件后续改该 prop 不会同步浮层；需要受控请用 :key 重建或在业务层自己维护（Popover.vue3.vue:14）。",
|
||
"open / close 声明未实现，示例里监听它们不会收到回调；关闭只能靠再次点击触发器（Popover.vue3.vue:13）。",
|
||
"浮层没有点击外部或 Esc 关闭逻辑，作为轻量容器够用，但放复杂表单前需要补交互（Popover.vue3.vue:2）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端是内部 open ref 的非受控实现，props.open 仅作初值；声明的 open/close 事件未实现，aria-expanded 已正确反映内部状态。",
|
||
"table": [
|
||
{
|
||
"name": "content",
|
||
"type": "String",
|
||
"desc": "浮层内容文本，默认一句解释文案"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"type": "String",
|
||
"desc": "弹出位置，默认 bottom；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "trigger",
|
||
"type": "String",
|
||
"desc": "触发方式，默认 click；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "open",
|
||
"type": "Boolean",
|
||
"desc": "初始展开状态，默认 false；仅作内部 ref 初值"
|
||
},
|
||
{
|
||
"name": "open",
|
||
"type": "emit(declared only)",
|
||
"desc": "声明了展开事件但模板内没有触发点"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"type": "emit(declared only)",
|
||
"desc": "声明了关闭事件但模板内没有触发点"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"触发器带 :aria-expanded 且浮层有 role=\"dialog\"，状态可被读屏感知（Popover.vue3.vue:2）。",
|
||
"浮层内的 role=\"dialog\" 没有 aria-modal 也没有标题关联，聚焦不会移入；纯说明内容建议改用 role=\"tooltip\" 或普通区域（Popover.vue3.vue:2）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Popover.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "popover 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/Popover.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"popover-ex-1",
|
||
"popover-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/Popover.vue3.vue:14 — 内部 open 仅取 prop 初值，非受控",
|
||
"frameworks/Popover.vue3.vue:2 — 触发器暴露展开态",
|
||
"frameworks/Popover.vue3.vue:2 — 浮层 role；open/close 事件声明无触发点"
|
||
]
|
||
}
|