@keekuun/mall-image-viewer v0.3.1

ImageViewer

介绍

安装

yarn add @keekuun/mall-image-viewer

引用

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

基本使用

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',
          }]

<ImageViewer data={data} />

自动播放

    <ImageViewer data={data} autoPlay showPlayButton />

幻灯片

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

关键属性

完整参数

参考REACT IMAGE GALLERY

兼容性完善

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

npm install classlist-polyfill -S

# 或者
yarn add classlist-polyfill -S

然后在项目index.ts中引入

import './fundebug';
import './public-path';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
import 'classlist-polyfill';
import './app';