king-design-analyzer 1.0.0

package/components/tooltip.json

@@ -0,0 +1,416 @@
+{
+    "id": "tooltip",
+    "name": "Tooltip",
+    "displayName": "提示弹层",
+    "category": "feedback",
+    "description": "提示弹层组件，用于在鼠标悬停或点击时显示额外的提示信息。支持多种触发方式、位置、主题等配置。",
+    "importStatement": "import { Tooltip } from '@king-design/vue';",
+    "props": [
+        {
+            "name": "content",
+            "description": "提示的内容",
+            "type": {
+                "raw": "string | VNode",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Tooltip content=\"提示内容\">"
+        },
+        {
+            "name": "trigger",
+            "description": "触发方式",
+            "type": {
+                "raw": "\"hover\" | \"click\" | \"focus\"",
+                "kind": "union",
+                "unionTypes": [
+                    "hover",
+                    "click",
+                    "focus"
+                ]
+            },
+            "required": false,
+            "default": "\"hover\"",
+            "allowedValues": [
+                {
+                    "value": "hover",
+                    "label": "悬停触发",
+                    "isDefault": true
+                },
+                {
+                    "value": "click",
+                    "label": "点击触发"
+                },
+                {
+                    "value": "focus",
+                    "label": "聚焦触发"
+                }
+            ],
+            "usageExample": "<Tooltip trigger=\"click\">"
+        },
+        {
+            "name": "value",
+            "description": "是否展示弹层，可用 v-model 双向绑定",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Tooltip v-model=\"visible\">"
+        },
+        {
+            "name": "disabled",
+            "description": "是否禁用提示",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Tooltip disabled>"
+        },
+        {
+            "name": "position",
+            "description": "弹层弹出的位置，默认在触发器正上方",
+            "type": {
+                "raw": "Position | \"left\" | \"bottom\" | \"right\" | \"top\"",
+                "kind": "union",
+                "unionTypes": [
+                    "left",
+                    "bottom",
+                    "right",
+                    "top"
+                ]
+            },
+            "required": false,
+            "default": "{my: 'center bottom-10', at: 'center top', collision: 'flipfit'}",
+            "allowedValues": [
+                {
+                    "value": "top",
+                    "label": "上方显示",
+                    "isDefault": true
+                },
+                {
+                    "value": "bottom",
+                    "label": "下方显示"
+                },
+                {
+                    "value": "left",
+                    "label": "左侧显示"
+                },
+                {
+                    "value": "right",
+                    "label": "右侧显示"
+                }
+            ],
+            "usageExample": "<Tooltip position=\"bottom\">"
+        },
+        {
+            "name": "theme",
+            "description": "主题",
+            "type": {
+                "raw": "\"dark\" | \"light\"",
+                "kind": "union",
+                "unionTypes": [
+                    "dark",
+                    "light"
+                ]
+            },
+            "required": false,
+            "default": "\"dark\"",
+            "allowedValues": [
+                {
+                    "value": "dark",
+                    "label": "深色主题",
+                    "isDefault": true
+                },
+                {
+                    "value": "light",
+                    "label": "浅色主题"
+                }
+            ],
+            "usageExample": "<Tooltip theme=\"light\">"
+        },
+        {
+            "name": "showArrow",
+            "description": "弹层是否展示箭头",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "true",
+            "usageExample": "<Tooltip :showArrow=\"false\">"
+        },
+        {
+            "name": "hoverable",
+            "description": "对于悬浮触发方式，提示弹层是否在鼠标悬浮时仍然展示",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Tooltip hoverable>"
+        },
+        {
+            "name": "always",
+            "description": "是否一直保持当前展示/隐藏状态",
+            "type": {
+                "raw": "boolean",
+                "kind": "boolean"
+            },
+            "required": false,
+            "default": "false",
+            "usageExample": "<Tooltip always>"
+        },
+        {
+            "name": "size",
+            "description": "弹层尺寸",
+            "type": {
+                "raw": "\"default\" | \"small\"",
+                "kind": "union",
+                "unionTypes": [
+                    "default",
+                    "small"
+                ]
+            },
+            "required": false,
+            "default": "\"default\"",
+            "allowedValues": [
+                {
+                    "value": "default",
+                    "label": "默认尺寸",
+                    "isDefault": true
+                },
+                {
+                    "value": "small",
+                    "label": "小尺寸"
+                }
+            ],
+            "usageExample": "<Tooltip size=\"small\">"
+        },
+        {
+            "name": "of",
+            "description": "弹出菜单的位置是相对当前触发元素还是父元素",
+            "type": {
+                "raw": "\"self\" | \"parent\" | Event",
+                "kind": "union",
+                "unionTypes": [
+                    "self",
+                    "parent"
+                ]
+            },
+            "required": false,
+            "default": "\"self\"",
+            "usageExample": "<Tooltip of=\"parent\">"
+        },
+        {
+            "name": "container",
+            "description": "指定弹出菜单追加的位置",
+            "type": {
+                "raw": "string | ((parentDom: Element, anchor: Node | null) => Element)",
+                "kind": "union"
+            },
+            "required": false,
+            "default": "undefined",
+            "usageExample": "<Tooltip :container=\"() => document.body\">"
+        }
+    ],
+    "events": [
+        {
+            "name": "show",
+            "vueEventName": "@show",
+            "description": "弹层展示时触发",
+            "payload": [],
+            "usageExample": "<Tooltip @show=\"handleShow\">",
+            "handlerExample": "const handleShow = () => {\n  console.log('Tooltip 已展示');\n};"
+        },
+        {
+            "name": "hide",
+            "vueEventName": "@hide",
+            "description": "弹层隐藏时触发",
+            "payload": [],
+            "usageExample": "<Tooltip @hide=\"handleHide\">",
+            "handlerExample": "const handleHide = () => {\n  console.log('Tooltip 已隐藏');\n};"
+        }
+    ],
+    "slots": [
+        {
+            "name": "content",
+            "description": "自定义提示内容"
+        }
+    ],
+    "methods": [],
+    "typeDefinitions": [
+        {
+            "name": "Position",
+            "definition": "type Position = {\n  my?: string | [string, string]\n  at?: string | [string, string]\n  collision?: Collision | [Collision, Collision]\n  collisionDirection?: ['left'] | ['top'] | ['left', 'top']\n}",
+            "description": "弹层位置配置"
+        },
+        {
+            "name": "Collision",
+            "definition": "type Collision = 'fit' | 'flip' | 'flipfit' | 'none'",
+            "description": "碰撞检测行为"
+        }
+    ],
+    "examples": [
+        {
+            "id": "tooltip_basic",
+            "title": "基础用法",
+            "description": "基本的悬浮提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Tooltip, Button } from '@king-design/vue';\n</script>\n<template>\n  <Tooltip content=\"这是一个提示\">\n    <Button>悬浮查看</Button>\n  </Tooltip>\n</template>",
+            "tags": [
+                "basic",
+                "hover"
+            ],
+            "usedProps": [
+                "content"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "创建一个基本的悬浮提示"
+        },
+        {
+            "id": "tooltip_position",
+            "title": "不同位置",
+            "description": "在不同方向显示提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Tooltip, Button } from '@king-design/vue';\n</script>\n<template>\n  <Tooltip content=\"上方提示\" position=\"top\">\n    <Button>上</Button>\n  </Tooltip>\n  <Tooltip content=\"下方提示\" position=\"bottom\">\n    <Button>下</Button>\n  </Tooltip>\n  <Tooltip content=\"左侧提示\" position=\"left\">\n    <Button>左</Button>\n  </Tooltip>\n  <Tooltip content=\"右侧提示\" position=\"right\">\n    <Button>右</Button>\n  </Tooltip>\n</template>",
+            "tags": [
+                "position",
+                "direction"
+            ],
+            "usedProps": [
+                "content",
+                "position"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "设置提示显示的位置"
+        },
+        {
+            "id": "tooltip_theme",
+            "title": "主题切换",
+            "description": "深色和浅色主题",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Tooltip, Button } from '@king-design/vue';\n</script>\n<template>\n  <Tooltip content=\"深色主题\" theme=\"dark\">\n    <Button>深色</Button>\n  </Tooltip>\n  <Tooltip content=\"浅色主题\" theme=\"light\">\n    <Button>浅色</Button>\n  </Tooltip>\n</template>",
+            "tags": [
+                "theme",
+                "dark",
+                "light"
+            ],
+            "usedProps": [
+                "content",
+                "theme"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用不同主题的提示"
+        },
+        {
+            "id": "tooltip_trigger",
+            "title": "触发方式",
+            "description": "不同的触发方式",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Tooltip, Button, Input } from '@king-design/vue';\n</script>\n<template>\n  <Tooltip content=\"悬浮触发\" trigger=\"hover\">\n    <Button>悬浮</Button>\n  </Tooltip>\n  <Tooltip content=\"点击触发\" trigger=\"click\">\n    <Button>点击</Button>\n  </Tooltip>\n  <Tooltip content=\"聚焦触发\" trigger=\"focus\">\n    <Input placeholder=\"聚焦查看\" />\n  </Tooltip>\n</template>",
+            "tags": [
+                "trigger",
+                "click",
+                "focus"
+            ],
+            "usedProps": [
+                "content",
+                "trigger"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "使用不同的触发方式"
+        },
+        {
+            "id": "tooltip_hoverable",
+            "title": "可交互内容",
+            "description": "提示内容可悬浮交互",
+            "difficulty": "medium",
+            "code": "<script setup lang=\"ts\">\nimport { Tooltip, Button } from '@king-design/vue';\n</script>\n<template>\n  <Tooltip hoverable>\n    <Button>悬浮查看</Button>\n    <template #content>\n      <a href=\"#\">可点击的链接</a>\n    </template>\n  </Tooltip>\n</template>",
+            "tags": [
+                "hoverable",
+                "interactive"
+            ],
+            "usedProps": [
+                "hoverable"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "提示内容中包含可交互元素"
+        },
+        {
+            "id": "tooltip_icon",
+            "title": "图标提示",
+            "description": "图标配合提示",
+            "difficulty": "easy",
+            "code": "<script setup lang=\"ts\">\nimport { Tooltip, Icon } from '@king-design/vue';\n</script>\n<template>\n  <span>价格 <Tooltip content=\"含税价格\"><Icon class=\"k-icon-question\" /></Tooltip></span>\n</template>",
+            "tags": [
+                "icon",
+                "help"
+            ],
+            "usedProps": [
+                "content"
+            ],
+            "usedEvents": [],
+            "usedMethods": [],
+            "scenario": "图标配合提示说明"
+        }
+    ],
+    "commonMistakes": [
+        {
+            "id": "tooltip_missing_trigger",
+            "description": "未提供触发元素",
+            "wrongCode": "<Tooltip content=\"提示\" />",
+            "correctCode": "<Tooltip content=\"提示\">\n  <Button>触发器</Button>\n</Tooltip>",
+            "explanation": "Tooltip 需要包裹一个子元素作为触发器",
+            "relatedProps": []
+        },
+        {
+            "id": "tooltip_position_typo",
+            "description": "position 值拼写错误",
+            "wrongCode": "<Tooltip position=\"buttom\">",
+            "correctCode": "<Tooltip position=\"bottom\">",
+            "explanation": "position 只支持 top, bottom, left, right，注意拼写",
+            "relatedProps": [
+                "position"
+            ]
+        },
+        {
+            "id": "tooltip_hoverable_content",
+            "description": "使用 hoverable 但 content 不可交互",
+            "wrongCode": "<Tooltip hoverable content=\"纯文本\" /> <!-- hoverable 无意义 -->",
+            "correctCode": "<Tooltip hoverable>\n  <Button>触发</Button>\n  <template #content>\n    <a href=\"#\">可点击链接</a>\n  </template>\n</Tooltip>",
+            "explanation": "hoverable 通常用于提示内容中有可交互元素的场景",
+            "relatedProps": [
+                "hoverable"
+            ]
+        }
+    ],
+    "searchKeywords": [
+        "提示",
+        "tooltip",
+        "悬浮提示",
+        "气泡",
+        "帮助提示",
+        "hover"
+    ],
+    "useCases": [
+        "按钮功能说明",
+        "图标含义解释",
+        "表单字段提示",
+        "禁用原因说明",
+        "截断文本完整展示"
+    ],
+    "relatedComponents": [
+        "Popover",
+        "Ellipsis"
+    ]
+}