open-index/open-npm huggingface dataset:
npm package: @rainhall/vue-virtual-scroll
Description: 一个基于 Vue 3 的虚拟滚动组件，用于高效渲染大量数据列表。
Latest version: 0.0.1

# Vue Virtual Scroll

一个基于 Vue 3 的虚拟滚动组件，用于高效渲染大量数据列表。

## 特性

- 🚀 高性能虚拟滚动
- 💪 支持动态高度
- 🎯 支持缓冲区配置
- 🎨 支持自定义样式
- 📦 支持按需加载

## 安装

```bash
npm install vue-virtual-scroll
```

## 使用方法

### 全局注册

```js
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import VueVirtualScroll from 'vue-virtual-scroll'

const app = createApp(App)
app.use(VueVirtualScroll)
app.mount('#app')
```

### 按需引入

```vue
<script setup>
import { VirtualScroll } from 'vue-virtual-scroll'
</script>
```

## 基础用法

```vue
<template>
  <VirtualScroll
    :items="items"
    :item-height="50"
    :buffer="5"
  >
    <template #default="{ item }">
      <div class="item">{{ item.content }}</div>
    </template>
  </VirtualScroll>
</template>

<script setup>
import { ref } from 'vue'
import { VirtualScroll } from 'vue-virtual-scroll'

const items = ref([
  { id: 1, content: 'Item 1' },
  { id: 2, content: 'Item 2' },
  // ... 更多项目
])
</script>

<style scoped>
.item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>
```

## 高级用法

### 自定义样式

```vue
<template>
  <VirtualScroll
    :items="items"
    :item-height="80"
    class="custom-scroll"
  >
    <template #default="{ item }">
      <div class="custom-item">
        <h3>{{ item.title }}</h3>
        <p>{{ item.description }}</p>
      </div>
    </template>
  </VirtualScroll>
</template>

<style lang="scss" scoped>
.custom-scroll {
  height: 500px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.custom-item {
  padding: 15px;
  margin: 5px;
  background: #f5f5f5;
  border-radius: 4px;
  
  h3 {
    margin: 0 0 8px;
    color: #333;
  }
  
  p {
    margin: 0;
    color: #666;
  }
}
</style>
```

## API

### Props

| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| items | Array | 是 | - | 要显示的数据数组，每个项目必须包含唯一的 id 属性 |
| itemHeight | Number | 是 | - | 每个项目的高度（像素） |
| buffer | Number | 否 | 5 | 缓冲区大小，用于预渲染的项目数量 |

### 插槽

| 名称 | 作用域参数 | 说明 |
|------|------------|------|
| default | { item } | 自定义项目渲染内容 |

### 样式类名

组件使用 BEM 命名规范，提供以下类名供样式覆盖：

- `.virtual-scroll`: 容器根元素
- `.virtual-scroll__content`: 内容容器
- `.virtual-scroll__items`: 项目列表容器
- `.virtual-scroll__item`: 单个项目容器

## 注意事项

1. 确保每个数据项都有唯一的 `id` 属性
2. 设置合适的 `itemHeight` 值，这会影响滚动性能
3. 根据实际需求调整 `buffer` 值，较大的值会预渲染更多项目，但可能影响性能

## 贡献

欢迎提交 Issue 和 Pull Request！

## 许可证

MIT