open-index/open-npm huggingface dataset:
npm package: @keekuun/mall-image-viewer
Description: 商城商品详情页ImageViewer
Author: 周克坤
Latest version: 0.3.1

# ImageViewer

## 介绍
<br />
商城商品详情页图片预览组件,基于`react-image-gallery`


## 安装

```
yarn add @keekuun/mall-image-viewer
```

## 引用

```typescript
import { ImageViewer } from '@keekuun/mall-image-viewer';
import '@keekuun/mall-image-viewer/src/styles/index.scss';
```

## 基本使用
```typescript
const data = [{
            original:
              'https://pic-market.cassmall.com/store/prod/store/1569726869595_7KPNAWGxbfFAMhGf3WGzrnmk3NSRf8yc.jpg?version=1604371489528',
            thumbnail:
              'https://pic-market.cassmall.com/store/prod/store/1569726869595_7KPNAWGxbfFAMhGf3WGzrnmk3NSRf8yc.jpg?version=1604371489528',
          }]
```

```react
<ImageViewer data={data} />
```

<br />

## 自动播放
```react
    <ImageViewer data={data} autoPlay showPlayButton />
```

<br />

## 幻灯片

```react
    <ImageViewer
        data={data}
        autoPlay
        showPlayButton
        showNav
        showZoom={false}
        trigger={'click'}
        thumbnailPosition={'right'}
    />
```

## 关键属性

| 属性 | 类型 | 默认值| 描述 |
| ---- | ----| ---- | ---- |
| className | string | '' | 类名 |
| style |  React.CSSProperties  | undefined | 样式 |
| autoPlay | boolean | false |是否自动播放 |
| data | ReactImageGalleryItem[] | [] |图片数据 |
| showNav | boolean | false |是否显示切换按钮箭头 |
| trigger | 'hover' | 'click' | 'hover' | hover切换, click切换 |
| showZoom | boolean | true | 是否显示放大对比 |


## 完整参数
> 参考[REACT IMAGE GALLERY](https://www.linxtion.com/demo/react-image-gallery/)


## 兼容性完善

在IE9下，es6 classList相关API会报错，请在项目中安装如下依赖，并引入：

```
npm install classlist-polyfill -S

# 或者
yarn add classlist-polyfill -S
```

然后在项目`index.ts`中引入
```js
import './fundebug';
import './public-path';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
import 'classlist-polyfill';
import './app';
```