101 lines
4.3 KiB
JSON
101 lines
4.3 KiB
JSON
{
|
||
"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 — 确认事件载荷为「不再提示」勾选状态"
|
||
]
|
||
}
|