React之使用React-viewer实现大图预览

一、插件介绍

该插件是根据viewJs封装的react可以使用：

• github: https://github.com/infeng/react-viewer
• npm: https://www.npmjs.com/package/react-viewer
• 在线演示：https://infeng.github.io/react-viewer/

viewJs：

• github: https://github.com/fengyuanchen/viewerjs
• 在线演示：https://fengyuanchen.github.io/viewerjs/

二、代码封装

（1）子组件封装

import React, { FC, useState, useCallback, memo } from 'react';
import Viewer from 'react-viewer';

export interface ImgProps {
  imgUrl: string;
}
const PictureView: FC<ImgProps> = memo(({ imgUrl }) => {
  const [visible, setVisible] = useState(false);
  const handleClick = useCallback(() => {
    setVisible(true);
  }, []);
  const handleClose = useCallback(() => {
    setVisible(false);
  }, []);
  return (
    <div>
    //我在这里的设计思想：
    // 1. 首先页面会渲染一张图片
    // 2. 点击小图之后显示大图
    // 也可以将这里的图片换成button实现点击，同时可以设置两张图片不一样
      <a href="javascript:;" onClick={handleClick}>
        <img src={imgUrl} />
      </a>
      <Viewer
        visible={visible}
        onClose={handleClose}
        images={[{ src: imgUrl, alt: '' }]}
      />
    </div>
  );
});
PictureView.displayName = 'PictureView';
export default PictureView;

（2）父组件调用

<div className={styles['compare-list__pic']}>
 <PictureView imgUrl={inputImageUrl}></PictureView>
</div>

三、react-viewer插件api

• changeable={false} 设置图片上一张下一张，默认为true
• zoomable={false} 设置图片是否放大，默认为true
• showTotal={false} 是否显示图片总数，false则不显示
• noToolbar={true}是否显示工具栏，ture不显示
• noFooter={true}是否显示底部状态，true不显示
• disableMouseZoom={true} 是否使用鼠标移动缩放，为true不显示
• scalable，默认为true，设置是否翻转
• defaultSize={{ width: 600, height: 700, }}设置默认宽度和高度