76 lines
3.1 KiB
JSON
76 lines
3.1 KiB
JSON
{
|
||
"slug": "bottomsheet",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 底部弹出面板，点遮罩或向上滑动关闭，关闭统一派发 close 事件。",
|
||
"usage": [
|
||
"Vue 2 端用 visible 控制显隐，:visible.sync 无法直接生效，因为组件只派发 close 而不是 update:visible。",
|
||
"关闭有两条路径：点遮罩，或在面板上向上滑动超过 80 像素。",
|
||
"滑动判定用 pointerdown 记录起点、pointerup 比较位移，阈值写在 onUp 里。",
|
||
"body 与 footer 都是插槽，页脚插槽为空时整行不渲染。"
|
||
],
|
||
"bestPractices": [
|
||
"监听 close 事件自行把 visible 置回 false，这是本组件的标准用法，没有 update:visible 可用。",
|
||
"模板有遮罩与面板两个同级根节点，这违反 Vue 2 单根限制，在构建期会被编译器报错；集成前需先合并为一个根元素。",
|
||
"遮罩与面板都靠 is-open 类做动效，类名以 visible 为条件，动画细节在 CSS 文件里。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端 2 个 prop、1 个 close 事件、2 个插槽；close 是唯一出口，没有 update:visible。",
|
||
"table": [
|
||
{
|
||
"name": "visible",
|
||
"type": "Boolean，默认 false",
|
||
"desc": "是否展开，同时驱动遮罩与面板的 is-open"
|
||
},
|
||
{
|
||
"name": "title",
|
||
"type": "String，默认空串",
|
||
"desc": "头部标题，为空时头部整行不渲染"
|
||
},
|
||
{
|
||
"name": "close",
|
||
"type": "事件，无参数",
|
||
"desc": "点遮罩或上滑超过阈值时派发"
|
||
},
|
||
{
|
||
"name": "default",
|
||
"type": "插槽",
|
||
"desc": "面板主体，默认文案为「默认内容」"
|
||
},
|
||
{
|
||
"name": "footer",
|
||
"type": "插槽",
|
||
"desc": "页脚内容，为空时整行不渲染"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"面板没有 role=\"dialog\" 与 aria-modal，读屏器不会切换到对话框模式。",
|
||
"关闭只能靠点击或滑动，没有 Esc 键处理，键盘用户缺少关闭手段。",
|
||
"遮罩是空 div，对读屏器不可见，也不会拦截焦点。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/BottomSheet.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "BottomSheet.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/BottomSheet.css",
|
||
"kind": "样式文件",
|
||
"desc": "BottomSheet.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"bottomsheet-ex-1",
|
||
"bottomsheet-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/BottomSheet.vue2.vue:15，visible 与 title 同行。",
|
||
"close 在 frameworks/BottomSheet.vue2.vue:2 与 19 派发，滑动阈值 -80 写在第 19 行。",
|
||
"模板第 2 行遮罩与第 3 行面板是两个同级根节点，违反 Vue 2 单根约束，已记入 bestPractices。",
|
||
"full 文件共 25 行，其中 style 用 src 引入外部 CSS，见 frameworks/BottomSheet.vue2.vue 末行。"
|
||
]
|
||
}
|