122 lines
4.3 KiB
JSON
122 lines
4.3 KiB
JSON
{
|
|
"slug": "modal",
|
|
"end": "vue2",
|
|
"curated": true,
|
|
"summary": "Vue 2 对话框，用 visible 控制显隐，关闭时派发 update:visible 供 .sync 回写。",
|
|
"usage": [
|
|
"Vue 2 端推荐写 :visible.sync=\"show\"，组件关闭时派发 update:visible 把值改回 false。",
|
|
"遮罩点击的关闭行为受 maskClosable 控制，掩码用的是 @click.self 所以点内容区不会误关。",
|
|
"底部默认按钮文案由 cancelText 与 okText 决定，确定走 ok 事件、取消走 cancel 事件加 update:visible。",
|
|
"想完全自管底部，用 footer 插槽整体替换；只想换标题，用 title 插槽。"
|
|
],
|
|
"bestPractices": [
|
|
"注意 props 里没有 title 之外的头部内容 prop，头部结构是标题加关闭按钮，要加图标只能走 title 插槽。",
|
|
"hideFooter 为 true 时 footer 插槽同样不渲染，两者不要混用来表达同一个诉求。",
|
|
"visible 为 false 时整个模板根节点不渲染（v-if），所以对话框关闭后内部表单状态会被销毁。"
|
|
],
|
|
"apiCarrier": {
|
|
"kind": "props",
|
|
"note": "Vue 2 端载体为 8 个 props、3 个事件与 3 个插槽；显隐走 visible 加 update:visible 而非 v-model。",
|
|
"table": [
|
|
{
|
|
"name": "visible",
|
|
"type": "Boolean，默认 false",
|
|
"desc": "对话框显隐，v-if 控制，配合 .sync 使用"
|
|
},
|
|
{
|
|
"name": "title",
|
|
"type": "String，默认空串",
|
|
"desc": "头部标题，可被 title 插槽覆盖"
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "String，默认 'default'",
|
|
"desc": "取值 small / default / large，对应 kole-modal--* 宽度类"
|
|
},
|
|
{
|
|
"name": "closable",
|
|
"type": "Boolean，默认 true",
|
|
"desc": "是否显示右上角关闭按钮"
|
|
},
|
|
{
|
|
"name": "maskClosable",
|
|
"type": "Boolean，默认 true",
|
|
"desc": "点击遮罩是否关闭"
|
|
},
|
|
{
|
|
"name": "hideFooter",
|
|
"type": "Boolean，默认 false",
|
|
"desc": "隐藏底部按钮区"
|
|
},
|
|
{
|
|
"name": "cancelText",
|
|
"type": "String，默认 '取消'",
|
|
"desc": "取消按钮文案"
|
|
},
|
|
{
|
|
"name": "okText",
|
|
"type": "String，默认 '确定'",
|
|
"desc": "确定按钮文案"
|
|
},
|
|
{
|
|
"name": "update:visible",
|
|
"type": "事件，参数固定为 false",
|
|
"desc": "关闭时派发，供 :visible.sync 回写"
|
|
},
|
|
{
|
|
"name": "ok",
|
|
"type": "事件，无参数",
|
|
"desc": "点击确定按钮派发"
|
|
},
|
|
{
|
|
"name": "cancel",
|
|
"type": "事件，无参数",
|
|
"desc": "点击取消或关闭时派发"
|
|
},
|
|
{
|
|
"name": "title",
|
|
"type": "插槽",
|
|
"desc": "头部标题自定义内容"
|
|
},
|
|
{
|
|
"name": "default",
|
|
"type": "插槽",
|
|
"desc": "对话框主体"
|
|
},
|
|
{
|
|
"name": "footer",
|
|
"type": "插槽",
|
|
"desc": "底部区域替换，非空时覆盖默认按钮"
|
|
}
|
|
]
|
|
},
|
|
"a11y": [
|
|
"内容容器带 role=\"dialog\"，读屏器会以对话框模式播报。",
|
|
"关闭按钮有 aria-label=\"关闭\"，图标 ✕ 对读屏器有可读名字。",
|
|
"缺少 aria-modal 与打开时的焦点转移，键盘焦点仍可能落在遮罩后的页面上，这是本实现的已知缺口。"
|
|
],
|
|
"resources": [
|
|
{
|
|
"file": "frameworks/Modal.vue2.vue",
|
|
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
|
"desc": "Modal.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
|
},
|
|
{
|
|
"file": "frameworks/Modal.css",
|
|
"kind": "样式文件",
|
|
"desc": "Modal.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
|
}
|
|
],
|
|
"exampleIds": [
|
|
"modal-ex-1",
|
|
"modal-ex-2",
|
|
"modal-ex-3"
|
|
],
|
|
"notes": [
|
|
"props 声明见 frameworks/Modal.vue2.vue:22-31，第 23 行注释写明「v-model 用 value（此处显式 visible）」。",
|
|
"update:visible 与 cancel 在 frameworks/Modal.vue2.vue:33 的 close() 中成对派发，ok 在模板第 12 行派发。",
|
|
"role=\"dialog\" 见 frameworks/Modal.vue2.vue:3，关闭按钮 aria-label 见第 6 行。",
|
|
"全文没有 aria-modal，可作为实现层面的无障碍缺口记录。"
|
|
]
|
|
}
|