Vue 3 快速虚拟滚动组件 - vue-virtualised

Vue 3 快速虚拟滚动组件 - vue-virtualised
插件名称 vue-virtualised
版本号 v0.1.7
发布时间 2021年4月9日
插件作者 FallingCeilingS

Vue 3的虚拟滚动库,可让您在应用程序中呈现高性能的大型列表和分层树视图。

安装和下载:

# Yarn
$ yarn add vue-virtualised

# NPM
$ npm i vue-virtualised

使用:

1.导入组件。

import { VirtualisedList, VirtualisedTree } from "vue-virtualised";

2.创建一个虚拟滚动列表。

<virtualised-list :nodes="[1, 2, 3, ...]">
  <template #cell="slotProps">
    {{ slotProps.node }}
  </template>
</virtualised-list>

3.创建一个虚拟滚动树。

<virtualised-tree
  :nodes="[
    {
      name: 'Node 1',
      children: [{ name: 'Leaf 1' }],
      state: { expanded: true },
    },
    { name: 'Node 2' },
  ]"
>
  <template #cell="slotProps">
    <div
      :style="{
        textAlign: 'left',
        marginLeft: `${slotProps.node.parents.length * 30}px`,
      }"
    >
      {{ slotProps.node.name }}
    </div>
  </template>
</virtualised-tree>

4. <VirtualizedTree />的可能道具

nodes: {
  type: Array as PropType<Array<Node>>,
  required: true,
},
useTimeSlicing: { type: Boolean, default: () => true },
onChange: {
  type: Function as PropType<OnChangeCallback>,
  default: () => null,
},
viewportHeight: {
  type: Number,
  default: () => 400,
},
initialScrollTop: {
  type: Number,
  default: () => 0,
},
initialScrollIndex: {
  type: Number,
  default: () => null,
},
scrollBehaviour: {
  // eslint-disable-next-line no-undef
  type: String as PropType<ScrollBehavior>,
  default: () => "auto",
},
tolerance: {
  type: Number,
  default: () => 2,
},
getNodeHeight: {
  type: Function as PropType<GetNodeHeight>,
  default: () => 40,
},
getNodeKey: {
  type: Function as PropType<GetNodeKey>,
  default: (node: NodeModel, index: number) => node.key ?? index,
},
cellRenderer: {
  type: Function as PropType<CellRenderer>,
  default: () => null,
},

5. <VirtualizedList />的可能道具

nodes: {
  type: Array as PropType<Array<any>>,
  required: true,
},
viewportHeight: {
  type: Number,
  default: () => 400,
},
initialScrollTop: {
  type: Number,
  default: () => 0,
},
initialScrollIndex: {
  type: Number,
  default: () => null,
},
scrollBehaviour: {
  // eslint-disable-next-line no-undef
  type: String as PropType<ScrollBehavior>,
  default: () => "auto",
},
tolerance: {
  type: Number,
  default: () => 2,
},
getNodeHeight: {
  type: Function as PropType<GetNodeHeight>,
  default: () => 40,
},
getNodeKey: {
  type: Function as PropType<GetNodeKey>,
  default: (node: any, index: number) => node.key ?? index,
},
cellRenderer: {
  type: Function as PropType<CellRenderer>,
  default: () => null,
},

变更日志:

v0.1.7 (06/07/2021)

  • 此版本更新了文档以区分 node.key 和 getNodeKey。

v0.1.5 (05/12/2021)

  • 优化包装尺寸。

v0.1.3 (05/05/2021)

  • 为要导入的 TypeScript 项目提供类型。

v0.1.1(04/21/2021)

  • 为空节点道具添加不变错误消息。

v0.1.0(04/19/2021)

  • TypeScript支持。
  • 不变的VS TS类型验证。
  • 添加/删除节点API。
  • 刷新组件API。