@keekuun/mall-image-viewer

ImageViewer

介绍

商城商品详情页图片预览组件,基于`react-image-gallery`

安装

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'}
    />

关键属性

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

完整参数

参考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';