{"_id":"@baker_kong/ktreeview","_rev":"2-93f2296e67db4df92b26737af80bc83c","name":"@baker_kong/ktreeview","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@baker_kong/ktreeview","version":"0.0.1","keywords":["TreeView","Vue3","UI","Component"],"author":{"url":"https://youzistack.vip","name":"Baker Kong","email":"bakercore@foxmail.com"},"license":"ISC","_id":"@baker_kong/ktreeview@0.0.1","maintainers":[{"name":"baker_kong","email":"1012039590@qq.com"}],"homepage":"https://github.com/xinfei-fun/KTreeView?tab=readme-ov-file","bugs":{"url":"https://github.com/xinfei-fun/KTreeView/issues"},"dist":{"shasum":"fa29c9eea1411dc949c29680523a74b7ad53842b","tarball":"https://registry.npmjs.org/@baker_kong/ktreeview/-/ktreeview-0.0.1.tgz","fileCount":21,"integrity":"sha512-nNCmIrQZq7y+kWjCD5BXRjc+OL/8c+IMDTSSogD+NSAFgLD2ruFGw0Le8wUZJv3vSAEtPhMqhNMmaZIxlz9IEw==","signatures":[{"sig":"MEYCIQC8TXmyIxnAr91Xaw1HiZE6NHUqucXPYJ2N81SiXaI3WgIhALxG/3aaOroGw1XqMOXmYs3PAHf/T/2Lp3b6u8TOM4rH","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":47641},"main":"dist/index.js","type":"module","module":"dist/index.es.js","gitHead":"ff8513c757d17f31465ee7465313c7fde667d0a7","scripts":{"dev":"vite -c ./playground/vite.config.js","lint":"eslint . --ext .vue,.js","build":"vite build","lint:fix":"eslint . --ext .vue,.js --fix"},"_npmUser":{"name":"baker_kong","email":"1012039590@qq.com"},"repository":{"url":"git+https://github.com/xinfei-fun/KTreeView.git","type":"git"},"_npmVersion":"10.8.2","description":"A Vue3 TreeView component, supports heavy nodes, with virtual scroll list!","directories":{},"_nodeVersion":"20.19.4","dependencies":{"es-toolkit":"^1.42.0"},"_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.24","vite":"^7.2.4","eslint":"^9.39.1","mockjs":"^1.1.0","prettier":"3.6.2","@eslint/js":"^9.39.1","sass-embedded":"^1.93.3","eslint-plugin-vue":"^10.6.2","@vitejs/plugin-vue":"^6.0.2","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4"},"peerDependencies":{"vue":">=3.3.0 <4.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ktreeview_0.0.1_1764777391130_0.7880881983958496","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@baker_kong/ktreeview","version":"0.0.2","description":"A Vue3 TreeView component, supports heavy nodes, with virtual scroll list!","type":"module","main":"dist/ktreeview.umd.cjs","module":"dist/ktreeview.js","exports":{".":{"import":"./dist/ktreeview.js","require":"./dist/ktreeview.umd.cjs"}},"scripts":{"build":"vite build","dev":"vite -c ./playground/vite.config.js","lint":"eslint .","lint:fix":"eslint . --fix"},"repository":{"type":"git","url":"git+https://github.com/xinfei-fun/KTreeView.git"},"keywords":["TreeView","Vue3","UI","Component"],"author":{"name":"Baker Kong","email":"bakercore@foxmail.com","url":"https://youzistack.vip"},"license":"ISC","bugs":{"url":"https://github.com/xinfei-fun/KTreeView/issues"},"homepage":"https://github.com/xinfei-fun/KTreeView?tab=readme-ov-file","devDependencies":{"@eslint/js":"^9.39.1","@vitejs/plugin-vue":"^6.0.2","eslint":"^9.39.1","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","eslint-plugin-vue":"^10.6.2","globals":"^16.5.0","mockjs":"^1.1.0","prettier":"3.6.2","sass-embedded":"^1.93.3","vite":"^7.2.4","vue":"^3.5.24"},"peerDependencies":{"vue":">=3.3.0 <4.0.0"},"dependencies":{"es-toolkit":"^1.42.0"},"_id":"@baker_kong/ktreeview@0.0.2","gitHead":"3bbf1f951ba4b8f788668b128359d75af6e056aa","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-XZ1yKROFIYrwTIiky3eMbpgce1k3q9thjQcUH7SvS12BhC8ZoDoatAfZN88oKlf5pnFpj22QL6auS5DXfPznuA==","shasum":"ec4750213bf494fbd3982305829867a5366fcc33","tarball":"https://registry.npmjs.org/@baker_kong/ktreeview/-/ktreeview-0.0.2.tgz","fileCount":8,"unpackedSize":104399,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCSOKTjCT8LuSs24k5ycc+OHwsM8S4Ge3fVVq8pET+KMgIhAJbDhYZFaoeIODDhRscXwuWysXxAi2Ep391D6eDoIiTv"}]},"_npmUser":{"name":"baker_kong","email":"1012039590@qq.com"},"directories":{},"maintainers":[{"name":"baker_kong","email":"1012039590@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ktreeview_0.0.2_1765023726505_0.7315140295419322"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T15:56:31.018Z","modified":"2025-12-06T12:22:06.862Z","0.0.1":"2025-12-03T15:56:31.329Z","0.0.2":"2025-12-06T12:22:06.665Z"},"bugs":{"url":"https://github.com/xinfei-fun/KTreeView/issues"},"author":{"name":"Baker Kong","email":"bakercore@foxmail.com","url":"https://youzistack.vip"},"license":"ISC","homepage":"https://github.com/xinfei-fun/KTreeView?tab=readme-ov-file","keywords":["TreeView","Vue3","UI","Component"],"repository":{"type":"git","url":"git+https://github.com/xinfei-fun/KTreeView.git"},"description":"A Vue3 TreeView component, supports heavy nodes, with virtual scroll list!","maintainers":[{"name":"baker_kong","email":"1012039590@qq.com"}],"readme":"# @baker_kong/ktreeview\n\n![npm version](https://img.shields.io/npm/v/@baker_kong/ktreeview)\n![license](https://img.shields.io/npm/l/@baker_kong/ktreeview)\n![vue](https://img.shields.io/badge/vue-3.x-brightgreen)\n![downloads](https://img.shields.io/npm/dm/@baker_kong/ktreeview)\n\n一个高性能的 Vue 3 树形视图组件，支持虚拟滚动和大量节点。\n\n## ✨ 特性\n\n- **虚拟滚动**：支持数十万至百万个节点的高性能渲染\n- **异步加载**：支持动态加载子节点数据\n- **完全可定制**：可自定义节点高度、缩进大小和样式\n- **Vue 3 兼容**：使用 Composition API 和 `<script setup>` 语法\n- **灵活的插槽系统**：支持自定义节点内容和图标\n- **响应式设计**：适配各种容器尺寸，自动响应容器尺寸变化并刷新\n- **轻量级**：无冗余依赖，打包体积小\n\n## 📦 安装\n\n```bash\nnpm install @baker_kong/ktreeview\n```\n\n或者使用 yarn：\n\n```bash\nyarn add @baker_kong/ktreeview\n```\n\n## � 按需自动引入 (可选)\n\n如果你使用 `unplugin-vue-components` 来自动引入组件，可以配置自定义 Resolver 来实现组件和样式的自动引入，无需手动 import。\n\n在你的 `vite.config.js` 中：\n\n```javascript\nimport { defineConfig } from 'vite'\nimport Components from 'unplugin-vue-components/vite'\n\nexport default defineConfig({\n  plugins: [\n    Components({\n      resolvers: [\n        (componentName) => {\n          // 匹配 KTreeView 或 KVirtualList\n          if (componentName.startsWith('K')) {\n            return {\n              name: componentName,\n              from: '@baker_kong/ktreeview',\n              // 自动引入对应的 CSS\n              sideEffects: '@baker_kong/ktreeview/dist/ktreeview.css'\n            }\n          }\n        }\n      ]\n    })\n  ]\n})\n```\n\n## �🚀 快速开始\n\n### 基本使用\n\n```vue\n<template>\n  <KTreeView\n    ref=\"treeviewRef\"\n    :item-height=\"itemHeight\"\n    :indent-size=\"indentSize\"\n    :get-children=\"getChildren\"                        \n  />\n</template>\n\n<script setup>\nimport { KTreeView } from '@baker_kong/ktreeview';\nimport '@baker_kong/ktreeview/dist/ktreeview.css'; // ⚠️ 务必引入样式文件\n\n// 获取子节点的函数\nconst getChildren = async (nodeId) => {\n  // 这里可以是从 API 获取数据\n  return [\n    { id: `${nodeId}-1`, label: '子节点 1', isLeaf: false },\n    { id: `${nodeId}-2`, label: '子节点 2', isLeaf: true },\n  ];\n};\n</script>\n```\n\n### 完整示例\n\n![运行示例](https://raw.githubusercontent.com/xinfei-fun/KTreeView/main/docs/Dec-06-2025%2011-27-04.gif)\n\n\n## 📖 API 文档\n\n### Props\n\n| 属性名         | 类型       | 默认值   | 说明                                                   |\n| -------------- | ---------- | -------- | ------------------------------------------------------ |\n| `item-height`  | `Number`   | `34`     | 每个节点的高度（像素）                                 |\n| `indent-size`  | `Number`   | `16`     | 每层缩进的大小（像素）                                 |\n| `get-children` | `Function` | **必填** | 获取子节点的异步函数，接收 `nodeId` 参数，返回节点数组 |\n\n### 方法\n\n通过 `ref` 暴露的方法：\n\n| 方法名          | 参数              | 说明                           |\n| --------------- | ----------------- | ------------------------------ |\n| `reBuildTree`   | `treeData: Array` | 重新构建树，传入新的根节点数据 |\n| `collapseNode`  | `nodeId: String`  | 折叠指定节点                   |\n| `expandNode`    | `nodeId: String`  | 展开指定节点                   |\n\n### 插槽\n\n| 插槽名    | 作用域参数 | 说明                |\n| --------- | ---------- | ------------------- |\n| `default` | `{ node }` | 自定义节点内容      |\n| `icon`    | `{ node }` | 自定义展开/折叠图标 |\n\n#### 插槽用法示例\n\n- **default 插槽**：用于自定义节点内容，可以访问节点的所有属性，适合用于显示自定义标签或添加额外元素。\n  ```vue\n  <template #default=\"{ node }\">\n    <div class=\"custom-node\">\n      <span class=\"node-label\">{{ node.label }}</span>\n      <span class=\"node-id\">ID: {{ node.id }}</span>\n    </div>\n  </template>\n  ```\n\n- **icon 插槽**：用于自定义展开/折叠图标，可以根据节点的加载状态或展开状态显示不同的图标。\n  ```vue\n  <template #icon=\"{ node }\">\n    <span v-if=\"node.isLoading\" class=\"loading-icon\">加载中...</span>\n    <span v-else-if=\"node.isExpanded\">▼</span>\n    <span v-else>▶</span>\n  </template>\n  ```\n\n### 事件\n\n| 事件名       | 参数           | 说明             |\n| ------------ | -------------- | ---------------- |\n| `node-click` | `node: Object` | 节点被点击时触发 |\n\n#### 事件用法示例\n\n- **node-click 事件**：当用户点击树节点时触发，回调函数接收被点击的节点对象作为参数。\n  ```vue\n  <KTreeView @node-click=\"handleNodeClick\" />\n\n  <script setup>\n  const handleNodeClick = (node) => {\n    console.log('点击的节点:', node.id, node.label);\n    // 可以在这里处理节点点击逻辑\n  };\n  </script>\n  ```\n\n## 🎯 节点数据结构\n\n每个节点有以下属性， 其中必填的属性是你在构建树或者获取子节点时候必须传递的。\n\n```javascript\n{\n  id: 'unique-id',      // 唯一标识符（必填）\n  label: '节点标签',     // 显示文本（必填）\n  isLeaf: false,        // 是否为叶子节点（必填）\n\n  isExpanded: false,    // 是否已展开（内部使用）\n  isLoading: false,     // 是否正在加载（内部使用）\n  alreadyLoad: false,   // 是否已加载过子节点（内部使用）\n  level: 0,             // 节点层级（内部使用）\n  children: [],         // 子节点数组（内部使用）\n  // 可以添加任意自定义属性\n}\n```\n\n## 🔍 高级用法\n\n### 懒加载优化\n\nKTreeView 支持懒加载子节点数据，通过 `get-children` 函数实现。以下是一些优化建议：\n\n- **加载状态反馈**：在自定义图标插槽中显示加载状态，以便用户知道节点正在加载。\n- **错误处理**：在 `get-children` 函数中处理错误，并通过自定义插槽或事件通知用户。\n- **缓存数据**：对于已经加载过的节点，可以在应用层实现缓存，避免重复请求。\n\n示例代码：\n```vue\n<template>\n  <KTreeView :get-children=\"fetchChildrenWithCache\">\n    <template #icon=\"{ node }\">\n      <span v-if=\"node.isLoading\" class=\"spinner\">加载中...</span>\n      <span v-else-if=\"node.isExpanded\">▼</span>\n      <span v-else>▶</span>\n    </template>\n  </KTreeView>\n</template>\n\n<script setup>\nconst cache = new Map();\n\nconst fetchChildrenWithCache = async (nodeId) => {\n  if (cache.has(nodeId)) {\n    return cache.get(nodeId);\n  }\n  try {\n    // 模拟 API 请求\n    const response = await fetch(`/api/children/${nodeId}`);\n    const data = await response.json();\n    cache.set(nodeId, data);\n    return data;\n  } catch (error) {\n    console.error('加载子节点失败:', error);\n    throw error; // 可以自定义错误处理逻辑\n  }\n};\n</script>\n```\n\n### 自定义样式\n\n可以通过 CSS 类和插槽自定义树节点的样式。例如，修改选中节点的背景色或添加自定义图标。\n\n示例代码：\n```vue\n<template>\n  <KTreeView class=\"custom-tree\">\n    <template #default=\"{ node }\">\n      <div class=\"custom-node-item\">\n        <span class=\"custom-icon\">{{ node.isLeaf ? '📄' : '📁' }}</span>\n        <span>{{ node.label }}</span>\n      </div>\n    </template>\n  </KTreeView>\n</template>\n\n<style scoped>\n.custom-tree :deep(.k-tree-node-selected) {\n  background-color: #e6f7ff;\n  color: #1890ff;\n}\n\n.custom-node-item {\n  display: flex;\n  align-items: center;\n}\n\n.custom-icon {\n  margin-right: 8px;\n}\n</style>\n```\n\n## 🔧 开发\n\n### 项目设置\n\n```bash\n# 安装依赖\nnpm install\n\n# 启动开发服务器（playground）\nnpm run dev\n\n# 构建库\nnpm run build\n\n# 代码检查\nnpm run lint\n\n# 自动修复代码格式\nnpm run lint:fix\n```\n\n### 项目结构\n\n```\nsrc/\n├── TreeView/\n│   ├── core/           # 核心逻辑\n│   │   ├── TreeModel.js\n│   │   └── VirtualListEngine.js\n│   └── ui/             # UI 组件\n│       ├── TreeView.vue\n│       └── VirtualList.vue\n└── index.js            # 入口文件\n```\n\n## 🤝 贡献\n\n欢迎贡献代码！请遵循以下步骤：\n\n1. Fork 项目\n2. 创建功能分支 (`git checkout -b feature/amazing-feature`)\n3. 提交更改 (`git commit -m 'Add some amazing feature'`)\n4. 推送到分支 (`git push origin feature/amazing-feature`)\n5. 开启 Pull Request\n\n### 报告问题\n\n请在 [GitHub Issues](https://github.com/xinfei-fun/KTreeView/issues) 报告问题。\n\n## 📄 许可证\n\n本项目基于 ISC 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。\n\n## 👨‍💻 作者\n\n**Baker Kong**\n- 邮箱: bakercore@foxmail.com\n- 网站: [https://youzistack.vip](https://youzistack.vip)\n- GitHub: [@xinfei-fun](https://github.com/xinfei-fun)\n\n## 🙏 致谢\n\n感谢所有为这个项目做出贡献的人！\n\n---\n\n**提示**: 这个组件专为处理大量数据的树形结构而设计。由于本人水平有限，目前实现的虚拟滚动**每行是定高**的。组件提供的功能也比较有限，欢迎提出更多反馈。\n","readmeFilename":"README.md"}