king-design-analyzer 1.0.0

package/components/drawer.json

@@ -0,0 +1,563 @@
+{
+    "id": "drawer",
+    "name": "Drawer",
+    "displayName": "抽屉",
+    "category": "feedback",
+    "description": "抽屉组件，从屏幕边缘滑出的浮层面板。支持从四个方向弹出，常用于承载详情信息、表单编辑等场景。与 Dialog 类似但更适合承载较多内容。",
+    "importStatement": "import { Drawer } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "value",
+            "description": "抽屉是否展示，可用 v-model 双向绑定",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Drawer v-model=\"visible\">"
+        },
+        {
+            "name": "title",
+            "description": "抽屉标题",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"提示\"",
+            "usageExample": "<Drawer title=\"抽屉标题\">"
+        },
+        {
+            "name": "placement",
+            "description": "抽屉弹出的位置",
+            "type": {
+                "raw": "\"top\" | \"bottom\" | \"left\" | \"right\"",
+                "kind": "union",
+                "unionTypes": [
+                    "top",
+                    "bottom",
+                    "left",
+                    "right"
+                ]
+            },
+            "required": false,
+            "default": "\"right\"",
+            "allowedValues": [
+                {
+                    "value": "right",
+                    "label": "从右侧弹出",
+                    "isDefault": true
+                },
+                {
+                    "value": "left",
+                    "label": "从左侧弹出"
+                },
+                {
+                    "value": "top",
+                    "label": "从顶部弹出"
+                },
+                {
+                    "value": "bottom",
+                    "label": "从底部弹出"
+                }
+            ],
+            "usageExample": "<Drawer placement=\"left\">"
+        },
+        {
+            "name": "size",
+            "description": "抽屉尺寸",
+            "type": {
+                "raw": "\"large\" | \"default\" | \"small\" | \"mini\"",
+                "kind": "union",
+                "unionTypes": [
+                    "large",
+                    "default",
+                    "small",
+                    "mini"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "large",
+                    "label": "大尺寸"
+                },
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                },
+                {
+                    "value": "mini",
+                    "label": "迷你尺寸"
+                }
+            ],
+            "usageExample": "<Drawer size=\"large\">"
+        },
+        {
+            "name": "width",
+            "description": "指定抽屉宽度，number 类型时单位为 px，string 类型需指定单位",
+            "type": {
+                "raw": "number | string",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Drawer :width=\"500\">"
+        },
+        {
+            "name": "loading",
+            "description": "\"确定\"按钮是否为加载状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Drawer :loading=\"isSubmitting\">"
+        },
+        {
+            "name": "disabledOk",
+            "description": "\"确定\"按钮是否为禁用状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Drawer :disabledOk=\"!isFormValid\">"
+        },
+        {
+            "name": "okText",
+            "description": "\"确定\"按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"确定\"",
+            "usageExample": "<Drawer okText=\"保存\">"
+        },
+        {
+            "name": "cancelText",
+            "description": "\"取消\"按钮文案",
+            "type": {
+                "raw": "string",
+                "kind": "string"
+            },
+            "required": false,
+            "default": "\"取消\"",
+            "usageExample": "<Drawer cancelText=\"关闭\">"
+        },
+        {
+            "name": "ok",
+            "description": "\"确定\"按钮点击后自定义回调函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function",
+                "functionSignature": "() => void"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Drawer :ok=\"handleOk\">"
+        },
+        {
+            "name": "cancel",
+            "description": "\"取消\"按钮点击后自定义回调函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function",
+                "functionSignature": "() => void"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Drawer :cancel=\"handleCancel\">"
+        },
+        {
+            "name": "hideClose",
+            "description": "是否隐藏右上角关闭按钮",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Drawer hideClose>"
+        },
+        {
+            "name": "overlay",
+            "description": "是否展示遮罩层",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Drawer :overlay=\"false\">"
+        },
+        {
+            "name": "closable",
+            "description": "点击遮罩层是否可以关闭抽屉",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Drawer :closable=\"false\">"
+        },
+        {
+            "name": "escClosable",
+            "description": "是否按 ESC 键时关闭抽屉",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Drawer :escClosable=\"false\">"
+        },
+        {
+            "name": "terminate",
+            "description": "用户点击关闭按钮、遮罩层或按 ESC 键时的回调函数",
+            "type": {
+                "raw": "() => void",
+                "kind": "function",
+                "functionSignature": "() => void"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Drawer :terminate=\"handleTerminate\">"
+        },
+        {
+            "name": "container",
+            "description": "指定抽屉插入的位置，默认追加到 body",
+            "type": {
+                "raw": "string | ((parentDom: Element, anchor: Node | null) => Element)",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Drawer :container=\"() => document.body\">"
+        },
+        {
+            "name": "mode",
+            "description": "指定关闭状态下的渲染方式",
+            "type": {
+                "raw": "\"destroy\" | \"hide\"",
+                "kind": "union",
+                "unionTypes": [
+                    "destroy",
+                    "hide"
+                ]
+            },
+            "required": false,
+            "default": "\"hide\"",
+            "allowedValues": [
+                {
+                    "value": "hide",
+                    "label": "隐藏但保留 DOM",
+                    "isDefault": true
+                },
+                {
+                    "value": "destroy",
+                    "label": "销毁 DOM"
+                }
+            ],
+            "usageExample": "<Drawer mode=\"destroy\">"
+        }
+    ],
+    "events": [
+        {
+            "name": "open",
+            "vueEventName": "@open",
+            "description": "抽屉打开后触发",
+            "payload": [],
+            "usageExample": "<Drawer @open=\"handleOpen\">",
+            "handlerExample": "const handleOpen = () => {\n  console.log('抽屉已打开');\n};"
+        },
+        {
+            "name": "close",
+            "vueEventName": "@close",
+            "description": "抽屉关闭后触发，不管是什么原因导致的关闭",
+            "payload": [],
+            "usageExample": "<Drawer @close=\"handleClose\">",
+            "handlerExample": "const handleClose = () => {\n  console.log('抽屉已关闭');\n};"
+        },
+        {
+            "name": "ok",
+            "vueEventName": "@ok",
+            "description": "点击确定按钮时触发",
+            "payload": [],
+            "usageExample": "<Drawer @ok=\"handleOk\">",
+            "handlerExample": "const handleOk = () => {\n  console.log('点击了确定');\n};"
+        },
+        {
+            "name": "cancel",
+            "vueEventName": "@cancel",
+            "description": "点击取消按钮时触发",
+            "payload": [],
+            "usageExample": "<Drawer @cancel=\"handleCancel\">",
+            "handlerExample": "const handleCancel = () => {\n  console.log('点击了取消');\n};"
+        },
+        {
+            "name": "terminate",
+            "vueEventName": "@terminate",
+            "description": "用户强行关闭抽屉时触发（点击关闭按钮、遮罩层或按 ESC）",
+            "payload": [],
+            "usageExample": "<Drawer @terminate=\"handleTerminate\">",
+            "handlerExample": "const handleTerminate = () => {\n  console.log('用户强行关闭');\n};"
+        },
+        {
+            "name": "afterClose",
+            "vueEventName": "@afterClose",
+            "description": "抽屉退出动画执行完成后触发",
+            "payload": [],
+            "usageExample": "<Drawer @afterClose=\"handleAfterClose\">",
+            "handlerExample": "const handleAfterClose = () => {\n  console.log('动画完成');\n};"
+        }
+    ],
+    "methods": [
+        {
+            "name": "show",
+            "description": "弹出抽屉",
+            "params": [],
+            "returnType": "Promise",
+            "usageExample": "drawerRef.value?.show();"
+        },
+        {
+            "name": "close",
+            "description": "关闭抽屉",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "drawerRef.value?.close();"
+        },
+        {
+            "name": "showLoading",
+            "description": "\"确定\"按钮变为加载状态",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "drawerRef.value?.showLoading();"
+        },
+        {
+            "name": "hideLoading",
+            "description": "\"确定\"按钮变为正常状态",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "drawerRef.value?.hideLoading();"
+        },
+        {
+            "name": "disableOk",
+            "description": "\"确定\"按钮变为禁用状态",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "drawerRef.value?.disableOk();"
+        },
+        {
+            "name": "enableOk",
+            "description": "\"确定\"按钮变为正常状态",
+            "params": [],
+            "returnType": "void",
+            "usageExample": "drawerRef.value?.enableOk();"
+        }
+    ],
+    "slots": [
+        {
+            "name": "content",
+            "description": "定义整个弹窗体，包括header，body，footer"
+        },
+        {
+            "name": "header",
+            "description": "扩展弹窗头部"
+        },
+        {
+            "name": "body",
+            "description": "扩展弹窗主体部分"
+        },
+        {
+            "name": "footer",
+            "description": "扩展弹窗底部"
+        },
+        {
+            "name": "footer-wrapper",
+            "description": "扩展弹窗整个底部，上述footer是它下面一个子扩展点"
+        }
+    ],
+    "examples": [
+        {
+            "id": "drawer_basic",
+            "title": "基础用法",
+            "description": "基本的抽屉",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开抽屉</Button>\n  <Drawer v-model=\"visible\" title=\"抽屉标题\">\n    <p>抽屉内容</p>\n  </Drawer>\n</template>",
+            "tags": [
+                "basic"
+            ],
+            "usedProps": [
+                "value",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的抽屉"
+        },
+        {
+            "id": "drawer_placement",
+            "title": "不同方向",
+            "description": "从四个方向弹出的抽屉",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\nconst placement = ref<'left' | 'right' | 'top' | 'bottom'>('right');\n\nconst openDrawer = (pos: typeof placement.value) => {\n  placement.value = pos;\n  visible.value = true;\n};\n</script>\n<template>\n  <Button @click=\"openDrawer('left')\">左侧</Button>\n  <Button @click=\"openDrawer('right')\">右侧</Button>\n  <Button @click=\"openDrawer('top')\">顶部</Button>\n  <Button @click=\"openDrawer('bottom')\">底部</Button>\n  <Drawer v-model=\"visible\" :placement=\"placement\" title=\"抽屉\">\n    <p>从 {{ placement }} 方向弹出</p>\n  </Drawer>\n</template>",
+            "tags": [
+                "placement",
+                "direction"
+            ],
+            "usedProps": [
+                "value",
+                "placement",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "从不同方向弹出抽屉"
+        },
+        {
+            "id": "drawer_width",
+            "title": "自定义宽度",
+            "description": "指定抽屉宽度",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开宽抽屉</Button>\n  <Drawer v-model=\"visible\" title=\"宽抽屉\" :width=\"500\">\n    <p>这是一个 500px 宽的抽屉</p>\n  </Drawer>\n</template>",
+            "tags": [
+                "width",
+                "custom"
+            ],
+            "usedProps": [
+                "value",
+                "title",
+                "width"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "自定义抽屉宽度"
+        },
+        {
+            "id": "drawer_footer",
+            "title": "自定义底部",
+            "description": "自定义抽屉底部按钮",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开抽屉</Button>\n  <Drawer v-model=\"visible\" title=\"自定义底部\">\n    <p>抽屉内容</p>\n    <template #footer>\n      <Button @click=\"visible = false\">关闭</Button>\n      <Button type=\"primary\" @click=\"visible = false\">保存</Button>\n    </template>\n  </Drawer>\n</template>",
+            "tags": [
+                "footer",
+                "slot",
+                "custom"
+            ],
+            "usedProps": [
+                "value",
+                "title"
+            ],
+            "usedEvents": [],
+            "usedSlots": [
+                "footer"
+            ],
+            "usedMethods": [],
+            "scenario": "自定义抽屉底部按钮区域"
+        },
+        {
+            "id": "drawer_no_overlay",
+            "title": "无遮罩层",
+            "description": "隐藏遮罩层的抽屉",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { ref } from 'vue';\nimport { Drawer, Button } from '@king-design/vue';\n\nconst visible = ref(false);\n</script>\n<template>\n  <Button @click=\"visible = true\">打开无遮罩抽屉</Button>\n  <Drawer v-model=\"visible\" title=\"无遮罩\" :overlay=\"false\">\n    <p>没有遮罩层的抽屉</p>\n  </Drawer>\n</template>",
+            "tags": [
+                "overlay",
+                "no-mask"
+            ],
+            "usedProps": [
+                "value",
+                "title",
+                "overlay"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建无遮罩层的抽屉"
+        },
+        {
+            "id": "drawer_form",
+            "title": "抽屉表单",
+            "description": "在抽屉中放置表单",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { ref, reactive } from 'vue';\nimport { Drawer, Button, Form, FormItem, Input } from '@king-design/vue';\n\nconst visible = ref(false);\nconst loading = ref(false);\nconst form = reactive({\n  name: '',\n  email: ''\n});\n\nconst handleOk = async () => {\n  loading.value = true;\n  // 模拟提交\n  await new Promise(r => setTimeout(r, 1000));\n  loading.value = false;\n  visible.value = false;\n};\n</script>\n<template>\n  <Button @click=\"visible = true\">打开表单</Button>\n  <Drawer v-model=\"visible\" title=\"编辑信息\" :loading=\"loading\" @ok=\"handleOk\">\n    <Form>\n      <FormItem label=\"姓名\">\n        <Input v-model=\"form.name\" />\n      </FormItem>\n      <FormItem label=\"邮箱\">\n        <Input v-model=\"form.email\" />\n      </FormItem>\n    </Form>\n  </Drawer>\n</template>",
+            "tags": [
+                "form",
+                "submit",
+                "loading"
+            ],
+            "usedProps": [
+                "value",
+                "title",
+                "loading"
+            ],
+            "usedEvents": [
+                "ok"
+            ],
+            "usedMethods": [],
+            "scenario": "在抽屉中放置编辑表单"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "drawer_placement_typo",
+            "description": "placement 值拼写错误",
+            "wrongCode": "<Drawer placement=\"center\">",
+            "correctCode": "<Drawer placement=\"right\">",
+            "explanation": "placement 只支持 top, bottom, left, right，不存在 center 值",
+            "relatedProps": [
+                "placement"
+            ]
+        },
+        {
+            "id": "drawer_vmodel_name",
+            "description": "使用错误的 v-model 属性名",
+            "wrongCode": "<Drawer v-model:visible=\"visible\">",
+            "correctCode": "<Drawer v-model=\"visible\">",
+            "explanation": "Drawer 使用 v-model 控制显示状态，不是 v-model:visible",
+            "relatedProps": [
+                "value"
+            ]
+        },
+        {
+            "id": "drawer_closable_vs_hideclose",
+            "description": "混淆 closable 和 hideClose",
+            "wrongCode": "<Drawer :closable=\"true\"> <!-- 想隐藏关闭按钮 -->",
+            "correctCode": "<Drawer hideClose> <!-- 隐藏关闭按钮 -->\n<Drawer :closable=\"false\"> <!-- 禁止点击遮罩关闭 -->",
+            "explanation": "closable 控制点击遮罩是否关闭，hideClose 控制是否显示关闭按钮",
+            "relatedProps": [
+                "closable",
+                "hideClose"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "抽屉",
+        "drawer",
+        "侧边栏",
+        "滑出",
+        "面板",
+        "详情"
+    ],
+    "useCases": [
+        "详情信息展示",
+        "表单编辑面板",
+        "配置设置面板",
+        "多级菜单操作",
+        "预览查看面板"
+    ],
+    "relatedComponents": [
+        "Dialog"
+    ]
+}