VirtualList

Универсальный список с виртуальным скроллом. Используется внутренне компонентом CommandPalette для наборов результатов больше 50 элементов, а также экспортируется для построения собственных списков.

Пропы

items

T[]

Полный список для виртуализации. T выводится из переданного массива.

itemHeight

number

Фиксированная высота каждой строки в пикселях.

containerHeight

number

Высота прокручиваемой области просмотра в пикселях.

overscan

number · по умолчанию: 3

Дополнительные элементы, рендерящиеся выше и ниже видимого диапазона, чтобы уменьшить мелькание при быстрой прокрутке.

activeIndex

number · по умолчанию: -1

Индекс (в items), который должен всегда оставаться в зоне видимости — задавайте его равным активному по клавиатуре пункту.

Слоты

#default

{ item, index }

Рендерит каждую видимую строку. item — значение из items, index — его позиция в полном (не виртуализированном) массиве.

<VirtualList :items="results" :item-height="40" :container-height="400" :active-index="activeIndex">
  <template #default="{ item, index }">
    <div :class="{ active: index === activeIndex }">{{ item.label }}</div>
  </template>
</VirtualList>