react-view的使用

react-view

一、插件介绍

react-view是根据viewJs进一步封装的插件，供react可以使用：
react-view

• 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/

二、使用步骤

• 安装 react-view

npm  i react-view

• 导入使用

import React,{ useState } from 'react';
import Viewer from 'react-viewer';
exprot default Demo =()=>[
	const [visible, setVisible] = useState(false);
	let imgList =[]
	const handleClose = ()=>{
		setVisible(false)
	}
	 return (
	      <Viewer
	        visible={visible}
	        onClose={handleClose}
	        images={imgList}
	        className="root-view-style"
	      />
	  );
}

具体使用案例（预览组件的封装）

/* ************************************************************************** */
/*   图片预览组件                                                             */
/* ************************************************************************** */
import React, { useState, useEffect, memo, useCallback } from 'react';
import './index.less';
import Viewer from 'react-viewer';
/**
 *
 * @param {boolean} isUpload   是否有需要上传（有上传按钮，只做预览，没有上传，渲染及预览）
 * @param {boolean} preVisible   是否展示预览（在只做预览存在)
 * @param {Array} imgList 图片的预览列表
 * @param {number} currentNum  当前显示图片页码（从0开始）(isUpload为true存在)
 * @param {Function} controlShowPreImg  弹框显示回传函数(isUpload为true存在)
 * @param {string} selfClassName  展示图片列表顶层自定义类名
 * @returns
 */
const PreviewImg = (props) => {
  const defaultList = [
    {
      src: 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
      alt: '图片1',
    },
    {
      src: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
      alt: '图片2',
    },
    {
      src: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
      alt: '图片3',
    },
  ];
  const {
    isUpload = false,
    preVisible = false,
    imgList = defaultList,
    currentNum = 0,
    controlShowPreImg,
    selfClassName = '',
  } = props;

  const [visible, setVisible] = useState(false);
  const [current, setCurrent] = useState(0);
  useEffect(() => {
    setCurrent(currentNum);
  }, []);

  useEffect(() => {
    if (isUpload) {
      setVisible(preVisible);
    }
  }, [props?.preVisible]);
  const changeImgIndex = (val) => {
    setCurrent(val);
    setVisible(true);
  };
  const onChange = (item, index) => {
    console.log('data index', item, index);
    setCurrent(index);
  };
  const handleClose = () => {
    setVisible(false);
    if (isUpload) {
      controlShowPreImg(false);
    }
  };
  //  不需要上传图片操作，图片预览
  const imgListRender = () => {
    return (
      <div className={`pre-show-list-img ${selfClassName}`}>
        {imgList.map((item, i) => {
          const { src, alt } = item;
          return (
            <div key={i + src} className="item-styles">
              <img src={src} alt={alt} onClick={() => changeImgIndex(i)} />
            </div>
          );
        })}
      </div>
    );
  };
  return (
    <div className="pre-view-img">
      {isUpload ? null : imgListRender()}
      <Viewer
        visible={visible}
        onClose={handleClose}
        activeIndex={current}
        images={imgList}
        onChange={onChange}
        className="root-view-style"
      />
    </div>
  );
};
export default PreviewImg;

//less文件
.pre-view-img {
  padding: 10px 10px;
  .pre-show-list-img {
    overflow: auto;
    white-space: nowrap;
    .item-styles {
      display: inline-block;
      max-width: 350px;
      margin: 10px;
      overflow: hidden;
      img {
        height: 180px;
      }
      &:nth-child(1) {
        margin-left: 0;
      }
    }
    &::-webkit-scrollbar {
      width: 12px;
      height: 12px;
      border-bottom: 1px solid #e9f0fd;
    }

    &::-webkit-scrollbar:vertical {
      width: 12px;
      height: 12px;
      border-bottom: 1px solid #e9f0fd;
    }

    &::-webkit-scrollbar-thumb {
      background-color: #4379ee;
      border-radius: 4px;
    }

    &::-webkit-scrollbar-track {
      background-color: #e9f0fd;
      border-radius: 4px;
      -webkit-box-shadow: 0;
    }
  }
}
.root-view-style {
  .react-viewer-navbar {
    height: 180px;
    .react-viewer-list {
      height: 100%;
      margin: 0 auto !important;
      display: inline-block;
      li {
        max-width: 270px;
        width: 120px;
        height: 100%;
        img {
          width: auto;
          height: 100%;
        }
      }
    }
  }
}

效果图

四、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, }}设置默认宽度和高度
activeIndex={} 当前图像index number