{"_id":"@chen_jjxx/vue-virtual-dynamic-list","name":"@chen_jjxx/vue-virtual-dynamic-list","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@chen_jjxx/vue-virtual-dynamic-list","version":"1.0.0","description":"A high-performance Vue 3 virtual scroll component with dynamic item heights","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"vite build","dev":"vite","prepublishOnly":"npm run build"},"keywords":["vue","vue3","virtual-scroll","dynamic-height","performance","list","component"],"author":{"name":"chenchenchen"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/your-username/vue-virtual-dynamic-list.git"},"peerDependencies":{"vue":"^3.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^4.4.0","typescript":"^5.2.0","vite":"^4.5.14","vue":"^3.3.0","vue-tsc":"^1.8.27"},"_id":"@chen_jjxx/vue-virtual-dynamic-list@1.0.0","bugs":{"url":"https://github.com/your-username/vue-virtual-dynamic-list/issues"},"homepage":"https://github.com/your-username/vue-virtual-dynamic-list#readme","_nodeVersion":"22.20.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-pBHRP6zNophM8lWk4yLGamb17BVLfz+EC1i0xMlWNLQu0zMU2URt76eDf7MGlLSAKUgnNDhfjGvq/zSPKIywOQ==","shasum":"7cd8a23df0005e3672410ab2b3a1103233ec2893","tarball":"https://registry.npmjs.org/@chen_jjxx/vue-virtual-dynamic-list/-/vue-virtual-dynamic-list-1.0.0.tgz","fileCount":9,"unpackedSize":16798,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCTH8DlrTJQMF4v6AyCKpZXg2UITJ2QFcg0s5s/RXUoSgIgBwdbYdHwNPpCWBLVY05L0okqCedRQyki3gsqYal4Pds="}]},"_npmUser":{"name":"chen_jjxx","email":"916618867@qq.com"},"directories":{},"maintainers":[{"name":"chen_jjxx","email":"916618867@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-virtual-dynamic-list_1.0.0_1763115144793_0.8901341446197402"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-14T10:12:24.688Z","1.0.0":"2025-11-14T10:12:24.992Z","modified":"2025-11-14T10:12:25.304Z"},"maintainers":[{"name":"chen_jjxx","email":"916618867@qq.com"}],"description":"A high-performance Vue 3 virtual scroll component with dynamic item heights","homepage":"https://github.com/your-username/vue-virtual-dynamic-list#readme","keywords":["vue","vue3","virtual-scroll","dynamic-height","performance","list","component"],"repository":{"type":"git","url":"git+https://github.com/your-username/vue-virtual-dynamic-list.git"},"author":{"name":"chenchenchen"},"bugs":{"url":"https://github.com/your-username/vue-virtual-dynamic-list/issues"},"license":"MIT","readme":"# Vue Virtual Dynamic List\n\n高性能的 Vue 3 虚拟滚动组件，支持动态项目高度。\n\n## 特性\n\n- 🚀 **高性能**: 只渲染可视区域内的项目\n- 📏 **动态高度**: 自动检测和调整项目高度\n- 🎯 **TypeScript**: 完整的类型支持\n- 🎨 **可定制**: 支持自定义项目渲染\n- 📱 **响应式**: 自动适应容器大小变化\n- ⚡ **轻量级**: 无外部依赖\n\n## 安装\n\n```bash\nnpm install @chen_jjxx/vue-virtual-dynamic-list\n```\n\n## 使用\n\n### 全局注册\n\n```javascript\nimport { createApp } from 'vue'\nimport VirtualDynamicList from '@chen_jjxx/vue-virtual-dynamic-list'\n\nconst app = createApp({})\napp.use(VirtualDynamicList)\n```\n\n### 局部导入\n\n```vue\n<template>\n  <VirtualDynamicList :items=\"items\" :item-height=\"50\">\n    <template #default=\"{ item, index }\">\n      <div class=\"my-item\">\n        {{ item.text }}\n      </div>\n    </template>\n  </VirtualDynamicList>\n</template>\n\n<script setup>\nimport VirtualDynamicList from '@chen_jjxx/vue-virtual-dynamic-list'\n\nconst items = ref([\n  { id: 1, text: '项目 1' },\n  { id: 2, text: '项目 2' },\n  // ...\n])\n</script>\n```\n\n## Props\n\n| 属性名 | 类型 | 默认值 | 说明 |\n|--------|------|--------|------|\n| items | `VirtualItem[]` | `[]` | 列表数据 |\n| itemHeight | `number` | `50` | 预估的项目高度 |\n| bufferSize | `number` | `5` | 缓冲区大小 |\n| keyField | `string` | `'id'` | 用于唯一标识项目的字段 |\n\n## 插槽\n\n### default\n\n默认插槽用于自定义项目渲染。\n\n```vue\n<template #default=\"{ item, index }\">\n  <!-- 自定义项目内容 -->\n</template>\n```\n\n参数：\n- `item`: 当前项目的数据\n- `index`: 当前项目的索引\n\n## TypeScript 类型\n\n```typescript\ninterface VirtualItem {\n  id: string | number\n  [key: string]: any\n}\n\ninterface VirtualListProps {\n  items: VirtualItem[]\n  itemHeight?: number\n  bufferSize?: number\n  keyField?: string\n}\n```\n\n## 性能优化建议\n\n1. **合理设置 bufferSize**: 缓冲区大小影响渲染性能和滚动流畅度\n2. **使用 keyField**: 确保每个项目有唯一的 key\n3. **避免频繁更新**: 大量数据更新时考虑使用防抖或节流\n4. **预估高度准确**: 尽量提供准确的 itemHeight 值\n\n## 示例\n\n### 基础用法\n\n```vue\n<template>\n  <VirtualDynamicList :items=\"items\" :item-height=\"50\" />\n</template>\n```\n\n### 动态高度\n\n```vue\n<template>\n  <VirtualDynamicList :items=\"items\" :item-height=\"60\">\n    <template #default=\"{ item }\">\n      <div :style=\"{ height: item.height + 'px' }\">\n        {{ item.content }}\n      </div>\n    </template>\n  </VirtualDynamicList>\n</template>\n```\n\n## 许可证\n\nMIT","readmeFilename":"README.md","_rev":"1-d0d13a106c9385d90924c8c5ffdd5201"}