82 lines
3.5 KiB
JSON
82 lines
3.5 KiB
JSON
{
|
||
"slug": "drawer",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 drawer：自带「打开抽屉」按钮并抛 open，open 控制遮罩与面板，关闭与确认是另外两个事件。",
|
||
"usage": [
|
||
"`:open` 为假时遮罩与 aside 都不渲染；组件自己那枚「打开抽屉」按钮只抛 `open`（第 2 行），要把 open 置真仍需父组件接住。",
|
||
"`:mask-closable` 会被短路运算求值：`@click.self=\"maskClosable && $emit('close')\"`（第 2 行），为假时点遮罩不触发 close。",
|
||
"aside 上的取消与确定按钮分别抛 `close` 与 `confirm`（第 2 行），两者都不带载荷，收起逻辑写在父组件同一个处理器里即可。"
|
||
],
|
||
"bestPractices": [
|
||
"props 里的 open 与 data 里的 open 同名（第 9、14 行），空数据初始值 false 只对未传参时生效，接入时优先把 open 当受控用。",
|
||
"`:placement` 在模板里没有任何绑定点，抽屉方向不会随它改变，当前只有 right 一套样式。",
|
||
"抽屉里的说明文字是模板写死的，要换标题用 title，要换正文目前得改实现或绕开。"
|
||
],
|
||
"a11y": [
|
||
"面板是 <aside> 加 role=\"dialog\" 与 aria-modal=\"true\"（第 2 行），语义与模态属性齐全，但未实现焦点陷阱与 Esc 关闭。",
|
||
"遮罩是 div 无 role，点击关闭是鼠标专属；键盘用户只能靠面板内的取消按钮退出。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 4 项（open/title/placement/maskClosable，frameworks/Drawer.vue2.vue:8-13）加 open、close、confirm 三个事件；placement 未被模板消费。",
|
||
"table": [
|
||
{
|
||
"name": "maskClosable",
|
||
"type": "属性",
|
||
"desc": "Boolean，控制遮罩点击是否触发 close，参与短路求值（frameworks/Drawer.vue2.vue:12,2）"
|
||
},
|
||
{
|
||
"name": "open",
|
||
"type": "Boolean",
|
||
"desc": "是否展开（frameworks/Drawer.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "placement",
|
||
"type": "属性",
|
||
"desc": "实现声明了这个 prop（String，默认 right，注释「弹出位置」），模板未做任何绑定（frameworks/Drawer.vue2.vue:11）"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "属性",
|
||
"desc": "抽屉标题，渲染进 aside 里的 .kole-drawer-title（frameworks/Drawer.vue2.vue:10,2）"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"type": "(val: any) => void",
|
||
"desc": "关闭时触发（frameworks/Drawer.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "confirm",
|
||
"type": "(val: any) => void",
|
||
"desc": "确认操作时触发（frameworks/Drawer.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "open",
|
||
"type": "Boolean",
|
||
"desc": "是否展开（frameworks/Drawer.vue2.vue:2）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Drawer.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/Drawer.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"drawer-ex-1",
|
||
"drawer-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/Drawer.vue2.vue:9-12；三处 $emit 全在模板第 2 行（open / close / confirm）。",
|
||
"data 第 14 行的 open 与第 9 行的 prop 同名，模板 v-if 读到的以 prop 为准，这一点在接入受控写法时要注意。"
|
||
]
|
||
}
|