# @keekuun/mall-image-viewer

> 商城商品详情页ImageViewer

Latest version **0.3.1** (published 2020-12-12) · 0 weekly downloads

## Install

```sh
npm install @keekuun/mall-image-viewer
pnpm add @keekuun/mall-image-viewer
yarn add @keekuun/mall-image-viewer
bun add @keekuun/mall-image-viewer
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.1 |
| Published | 2020-12-12 |
| First published | 2020-12-12 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 26.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | 周克坤 |
| Maintainers | keekuun |

## Links

- npm: https://www.npmjs.com/package/@keekuun/mall-image-viewer
- npm.io page: https://npm.io/package/@keekuun/mall-image-viewer

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.9.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.9.0
- [react-image-gallery](https://npm.io/package/react-image-gallery.md) ^1.0.8

## Recent versions

- 0.3.1 (latest) — 2020-12-12
- 0.3.0 — 2020-12-12

## README

# 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';
```

---
_Source: https://npm.io/package/@keekuun/mall-image-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._