97 lines
3.9 KiB
JSON
97 lines
3.9 KiB
JSON
{
|
||
"slug": "confirmmodal",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 confirmmodal：visible 单向控制显隐，取消与确认分别走 cancel 和 confirm，且 confirm 会把勾选态带出去。",
|
||
"usage": [
|
||
"`:visible` 为假时整块遮罩不进 DOM；组件不自己关闭，点取消或遮罩只抛 `cancel`（第 2、13 行），要由父组件把 visible 改回 false。",
|
||
"确认按钮抛的是 `confirm`，第二个参数是 data 里那个「不再提示」勾选框的当前值 dontAskChecked（第 15 行），不是事件对象。",
|
||
"`:dontAsk` 为真才渲染勾选行，勾选态存在组件内的 data.dontAskChecked（第 36 行），不通过 prop 传入也不实时外抛。"
|
||
],
|
||
"bestPractices": [
|
||
"`:loading` 会同时禁用两枚按钮并把确认文案换成「处理中…」（第 16 行），提交流程期间不必自己再做按钮防重复。",
|
||
"`:confirmType` 是二元判断：只有传 danger 时才是 is-danger 加 danger 按钮，其余值一律落到 is-primary / primary。",
|
||
"标题与正文是两个独立 prop（title / content），别把多段说明压进 content 用换行模拟结构。"
|
||
],
|
||
"a11y": [
|
||
"遮罩没有 role=\"dialog\" 与 aria-modal，且按钮虽为原生 button 但在遮罩内没有焦点陷阱，打开后 Tab 仍可落到背景页。",
|
||
"「不再提示」是原生 input type=\"checkbox\" 配 label，点击文字即可切换，键盘空格同样有效，无需再补 tabindex。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 8 项（visible/title/content/confirmType/confirmText/cancelText/loading/dontAsk，frameworks/ConfirmModal.vue2.vue:26-35）加 cancel、confirm 两个事件。",
|
||
"table": [
|
||
{
|
||
"name": "cancelText",
|
||
"type": "String",
|
||
"desc": "取消按钮文本（frameworks/ConfirmModal.vue2.vue:13）"
|
||
},
|
||
{
|
||
"name": "confirmText",
|
||
"type": "String",
|
||
"desc": "确认按钮文案（frameworks/ConfirmModal.vue2.vue:16）"
|
||
},
|
||
{
|
||
"name": "confirmType",
|
||
"type": "String",
|
||
"desc": "确认按钮样式（frameworks/ConfirmModal.vue2.vue:3）"
|
||
},
|
||
{
|
||
"name": "content",
|
||
"type": "String",
|
||
"desc": "内容（frameworks/ConfirmModal.vue2.vue:8）"
|
||
},
|
||
{
|
||
"name": "dontAsk",
|
||
"type": "Boolean",
|
||
"desc": "是否提供不再询问（frameworks/ConfirmModal.vue2.vue:9）"
|
||
},
|
||
{
|
||
"name": "loading",
|
||
"type": "Boolean",
|
||
"desc": "是否加载中（契约：支持加载状态）（frameworks/ConfirmModal.vue2.vue:13）"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String",
|
||
"desc": "标题（契约：标题、描述、图标）（frameworks/ConfirmModal.vue2.vue:6）"
|
||
},
|
||
{
|
||
"name": "visible",
|
||
"type": "Boolean",
|
||
"desc": "是否可见（frameworks/ConfirmModal.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "cancel",
|
||
"type": "(val: any) => void",
|
||
"desc": "取消操作时触发（frameworks/ConfirmModal.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "confirm",
|
||
"type": "(val: any) => void",
|
||
"desc": "确认操作时触发（frameworks/ConfirmModal.vue2.vue:3）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/ConfirmModal.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/ConfirmModal.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"confirmmodal-ex-1",
|
||
"confirmmodal-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/ConfirmModal.vue2.vue:27-34；三处 $emit 在第 2、13、15 行，其中第 15 行带 dontAskChecked 载荷。",
|
||
"事实包 consumedApi 里出现 modelValue，但源码全文无此词，故显隐只能按 :visible 单向控制理解。"
|
||
]
|
||
}
|