# 预览图插件

注意

这不是superplayer的内置插件

预览图插件包含了两种类型的预览插件：鼠标悬停的单图预览和拖拽时的滚轮式预览。您可以根据需求选择性的加载。

# 使用

npm i --save @tencent/thumbplayer-plugin-ui-preview

import { UIPreviewPlugin, UIPreviewListPlugin } from '@tencent/thumbplayer-plugin-ui-preview';
// mock数据
const previewData = {
    // 低清预览图
    imgData: [
    {
      imgs: [
        'http://127.0.0.1:8887/big-buck-bunny.mp4-MoviePrint-1.jpg',
      ],
      width: 1024,
      height: 576,
      count: 100,
      rowCount: 10,
      colCount: 10,
    },
    // 高清预览图
    {
      imgs: [
        'http://127.0.0.1:8887/big-buck-bunny-1.mp4-MoviePrint-1.jpg',
        'http://127.0.0.1:8887/big-buck-bunny-2.mp4-MoviePrint-1.jpg',
        'http://127.0.0.1:8887/big-buck-bunny-3.mp4-MoviePrint-1.jpgs',
        'http://127.0.0.1:8887/big-buck-bunny-4.mp4-MoviePrint-1.jpg',
      ],
      width: 2048,
      height: 1152,
      count: 25,
      rowCount: 5,
      colCount: 5,
    },
  ],
  interval: 6,
};

const { pluginName: uipreview } = UIPreviewPlugin;
const { pluginName: uipreviewlist } = UIPreviewListPlugin;
const player = new SuperPlayer({
  container: '#auth-player',
  // 申明插件
  plugins: [
    uipreview,
    uipreviewlist,
  ],
  preview: previewData,
});

# 配置

加载后可以通过preview节点配置

# curPreviewWidth

• Optional curPreviewWidth: number

当前预览图的容器宽度

# disablePoster

• Optional disablePoster: Boolean

是否禁用默认poster

# imgData

• Optional imgData: IUIPreviewPluginImageOpts[]

预览图

# interval

• Optional interval: number

切换预览图的间隔

# smallPreviewWidth

• Optional smallPreviewWidth: number

当前预览图的容器高度

# 预览图参数

# colCount

• colCount: number

雪碧图包含列数

# count

• count: number

雪碧图包含的截图数

# height

• height: number

雪碧图总高

# imgs

• imgs: string[]

预览图的地址集合

# rowCount

• rowCount: number

雪碧图包含行数

# width

• width: number

雪碧图总宽

# UIPreivew API

# destroy

▸ destroy(): void

销毁插件，移除dom，移除额外的dom事件

Returns: void

# hidePreview

▸ hidePreview(): void

外部可主动调用隐藏预览图

Returns: void

# setConfig

▸ setConfig(config: Partial<IUIPreviewPluginOption>): void

增量更新插件配置

# Parameters:

Name	Type
`config`	Partial<IUIPreviewPluginOption>

Returns: void

# showPreview

▸ showPreview(): void

外部可主动调用显示预览图

Returns: void

# UIPreviewList API

# destroy

▸ destroy(): void

销毁插件，移除dom节点，注销内部事件监听

Returns: void

# hidePreview

▸ hidePreview(): void

外部可主动调用隐藏预览图

Returns: void

# setConfig

▸ setConfig(config: Partial<IUIPreviewPluginOption>): void

增量更新插件配置

# Parameters:

Name	Type
`config`	Partial<IUIPreviewPluginOption>

Returns: void

# showPreview

▸ showPreview(): void

外部可主动调用显示预览图

Returns: void

# updatePoster

▸ updatePoster(data: Object): void

更新预览图poster

# Parameters:

Name	Type
`data`	Object

Returns: void

← 水印错误页 →