white-board-sdk 使用文档

# ThumbnailPlugin 缩略图插件

缩略图插件 ThumbnailPlugin 用于创建缩略图功能，详细使用方式可参考示例代码中 src/components/thumbnail 目录下的代码。

# 文档

ThumbnailPlugin 文档地址：打开文档 (opens new window)

# 使用

引入并实例化 ThumbnailPlugin，并安装进白板实例中。

import { WhiteBoard, ThumbnailPlugin } from '@polyv/white-board-sdk';

const whiteBoard = new WhiteBoard('#wrap');
const thumbnailCtx = new ThumbnailPlugin({
  selector: '#thumbnail-wrap',
});
whiteBoard.plugin.installPlugin(thumbnailCtx);
1
2
3
4
5
6
7

在实例化传入 getThumbnailItem 获取缩略图节点方法。

import { GetThumbnailItem, ThumbnailItemParams } from '@polyv/white-board-sdk';

const getThumbnailItem: GetThumbnailItem = (params: ThumbnailItemParams) => {
  let content = `
    <img
      class="example-thumbnail-item__content--img"
      src="${params.url}"
    />
  `;

  if (params.type === 'white' || !params.url) {
    content = '<div class="example-thumbnail-item__content--white"></div>';
  }

  return `
    <div class="example-thumbnail-item">
      <div class="example-thumbnail-item__inner">
        <div class="example-thumbnail-item__border">
          ${content}
          <span>${params.index + 1}</span>
        </div>
      </div>
    </div>
  `;
};

// 传入 getThumbnailItem 获取缩略图的 Dom 节点
const thumbnailCtx = new ThumbnailPlugin({
  selector: '#thumbnail-wrap',
  getThumbnailItem,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

getThumbnailItem 方法的入参为缩略图节点数据，数据类型如下：

/**
 * 缩略图节点类型
 */
interface ThumbnailItemParams {
  /** 节点类型，白板或 ppt */
  type: 'white' | 'ppt',
  /**
   * 类型为 ppt 时的缩略图背景地址，
   * 当 type 为 white 或不存在对应的缩略图图片时该值为 undefined
   */
  url?: string,
  /** 对象索引，从 0 开始 */
  index: number,
  /** 是否为当前页 */
  isCurrent: boolean,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 选项

# selector

  • 作用：缩略图区域选择器。
  • 类型：string | HTMLElement

# direction

  • 作用：缩略图滚动方向。
  • 类型：string
  • 默认值：vertical
  • 可选值：
    • horizontal - 横向滚动
    • vertical - 纵向滚动

# currentClassName

  • 作用：缩略图在某页下的 className。
  • 类型：string
  • 默认值：current

# thumbnailClassName

  • 作用：缩略图节点外层的 className。
  • 类型：string

# getThumbnailItem

  • 作用：获取缩略图 Dom 节点方法。
  • 类型：Function
  • TS 类型：GetThumbnailItem

# changeCallback

  • 作用：当缩略图数据数组改变时的回调方法。
  • 类型：Function
  • TS 类型：ThumbnailDataChangeCallback

# 方法

# switchThumbnail(index: number)

  • 作用：切换缩略图，即切换页数，该方法为操作者主动进行切换操作。
  • 参数：index，缩略图索引，由 ThumbnailItemParams 中的 index 提供。

# refresh()

  • 作用：强行刷新缩略图数据，该方法会重新生成一份新的 thumbnails。

# 滚动功能

缩略图插件内的滚动功能使用的是 better-scroll 滚动插件，内部继承了 scroll-bar 滚动栏、 mouse-wheel 鼠标滚轮插件，

内部滚动条样式由 better-scroll 提供，开发者可自行覆盖内部滚动条的样式。

# 图片懒加载

在文档页数过多情况下，一次性加载多张缩略图会造成性能的损耗，ThumbnailPlugin 内部提供图片滚动懒加载功能，您只需要在 <img /> 节点中设置 data-lazy-load 属性即可，插件内部会监听 better-scroll 的滚动事件，在滚动停止后才加载正在显示的图片，示例代码如下：

import { ThumbnailItemParams } from '@polyv/white-board-sdk';

function getThumbnailItem(params: ThumbnailItemParams): string {
  return `
    <img
      src="https://iph.href.lu/139x78"
      data-lazy-url="${params.url}"
    />
  `;
}

const thumbnailCtx = new ThumbnailPlugin({
  selector: '#thumbnail-wrap',
  getThumbnailItem,
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 自定义功能

如果您不想使用内部的 UI 实现功能或滚动功能，可以使用 ThumbnailDataPlugin 插件，该插件仅提供缩略图数据，不具备 UI 实现，使用方式如下：

import { ThumbnailDataPlugin, ThumbnailItemParams } from '@polyv/white-board-sdk';

// 当前白板实例的缩略图数据
let thumbnails: ThumbnailItemParams[] = [];

const thumbnailCtx = new ThumbnailDataPlugin({
  changeCallback: (_thumbnails: ThumbnailItemParams[]) => {
    thumbnails = _thumbnails;
  },
});
1
2
3
4
5
6
7
8
9
10

如果您是使用 vue 等 MVVM 框架，则可以保存并根据 thumbnails 进行缩略图渲染。

TIP

ThumbnailPlugin 就是继承了 ThumbnailDataPlugin 实现的。

←