{
  "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 事件声明无触发点"
  ]
}