{
  "slug": "confirmmodal",
  "end": "vue3",
  "curated": true,
  "summary": "Vue 3 确认弹窗：主次按钮承载确认/取消，可带「不再提示」勾选与提交中禁用态。",
  "usage": [
    "显隐用 :visible 单向控制，弹窗自身不关闭：点取消 emit(\"cancel\")、点确认 emit(\"confirm\", dontAskChecked)，由父组件改 visible（ConfirmModal.vue3.vue:13）。",
    "确认事件的第二参就是「不再提示」勾选状态，勾选框只有 dontAsk 为真时才渲染（ConfirmModal.vue3.vue:15）。",
    "confirmType 只区分 danger 与 primary 两种取值，决定根类名是 is-danger 还是 is-primary（ConfirmModal.vue3.vue:3）。",
    "loading 为真时两个按钮同时 disabled，确认按钮文案临时变成「处理中…」，适合接提交接口期间防重复点（ConfirmModal.vue3.vue:16）。",
    "点遮罩空白处等同取消（@click.self 上直接 emit cancel），弹窗本体不冒泡触发（ConfirmModal.vue3.vue:2）。"
  ],
  "bestPractices": [
    "契约里声明过 modelValue，但本端实现只消费 visible，没有 modelValue prop；用 v-model 驱动显隐不会生效，必须写 :visible 加事件回写（ConfirmModal.vue3.vue:25）。",
    "dontAskChecked 是内部 ref，弹窗重新打开时不会自动复位，父组件复用时要注意上一次的勾选状态会保留（ConfirmModal.vue3.vue:36）。",
    "loading 期间遮罩仍可点击并且依然会 emit cancel，需要严格锁定的场景应在处理 cancel 时判断 loading（ConfirmModal.vue3.vue:2）。"
  ],
  "apiCarrier": {
    "kind": "props",
    "note": "本端是 visible 单向受控 + cancel/confirm 事件的组合；「不再提示」状态随确认事件携带，但组件不负责它的持久化。",
    "table": [
      {
        "name": "visible",
        "type": "Boolean",
        "desc": "是否显示弹窗，默认 false；组件自身不改该值"
      },
      {
        "name": "title",
        "type": "String",
        "desc": "弹窗标题，默认「确认操作」"
      },
      {
        "name": "content",
        "type": "String",
        "desc": "正文说明，默认空串"
      },
      {
        "name": "confirmType",
        "type": "String",
        "desc": "danger | primary，默认 danger；只影响配色类名"
      },
      {
        "name": "confirmText",
        "type": "String",
        "desc": "确认按钮文案，默认「确定」"
      },
      {
        "name": "cancelText",
        "type": "String",
        "desc": "取消按钮文案，默认「取消」"
      },
      {
        "name": "loading",
        "type": "Boolean",
        "desc": "提交中态，默认 false；两按钮禁用且确认文案改为「处理中…」"
      },
      {
        "name": "dontAsk",
        "type": "Boolean",
        "desc": "是否渲染「不再提示」勾选框，默认 false"
      },
      {
        "name": "cancel",
        "type": "emit(no payload)",
        "desc": "点取消按钮或遮罩时触发"
      },
      {
        "name": "confirm",
        "type": "emit(payload: Boolean)",
        "desc": "点确认按钮时触发，载荷为「不再提示」勾选状态"
      }
    ]
  },
  "a11y": [
    "弹窗容器没有 role=\"dialog\" 与 aria-modal，也没有 aria-labelledby 指向标题，读屏不会把它识别为模态对话框（ConfirmModal.vue3.vue:3）。",
    "打开后焦点不转移到弹窗内，Tab 会继续在背景页面游走；关闭后也没有归还焦点的处理（ConfirmModal.vue3.vue:2）。"
  ],
  "resources": [
    {
      "file": "frameworks/ConfirmModal.vue3.vue",
      "kind": "Vue 3 组件",
      "desc": "confirmmodal 的 Vue 3（<script setup>）实现源码"
    },
    {
      "file": "frameworks/ConfirmModal.css",
      "kind": "样式",
      "desc": "该组件在 PC 端共用的样式表"
    }
  ],
  "exampleIds": [
    "confirmmodal-ex-1",
    "confirmmodal-ex-2"
  ],
  "notes": [
    "frameworks/ConfirmModal.vue3.vue:35 — 两个事件：取消无载荷、确认携带勾选态",
    "frameworks/ConfirmModal.vue3.vue:29 — confirmType 只映射 is-danger / is-primary 两个类",
    "frameworks/ConfirmModal.vue3.vue:36 — 勾选态是内部 ref，无对应 prop 可预置",
    "frameworks/ConfirmModal.vue3.vue:15 — 确认事件载荷为「不再提示」勾选状态"
  ]
}