基于react和rc-viewer封装一个图片预览组件

在项目实战开发中，图片预览是非常常见的需求，尤其是在做后台管理系统中，我们都知道在使用Vue开发的项目中，v-viewer是一个基于Vue和Viewer.js封装的非常好用的第三方图片预览组件。其实Viewer.js也有基于React封装的版本，那就是rc-viewer。

但是，在实际开发中，我们可能有很多页面都需要使用到图片预览功能，作为一个有追求的程序猿，当然无法接收相同的事情重复干。基于组件化的开发思想，今天我们将基于react和rc-viewer二次封装一个图片预览组件。

一、基本使用

1. 安装

npm install @hanyk/rc-viewer

2. 简单使用

import React, {
    useState } from "react";
import {
    Button } from "antd";
import RcViewer from "@hanyk/rc-viewer";
function Preview() {
   
  const [preview, setPreview] = useState(null);
  const [previewImgUrl, setPreviewImgUrl] = useState("");
  function handlePreview() {
   
    setPreviewImgUrl(
      "http://xxxx.oss-cn-shenzhen.aliyuncs.com/jies/settlement/2020-12-24/420325196902011112%E5%9B%BD%E5%BE%BD%E9%9D%A2%20-%20%E5%89%AF%E6%9C%AC%20(4)-20201224180454.jpg"
    );
    if (preview) {
   
      preview.viewer.show();
    }
  }
  const options = {
   
    // 是否显示下面工具栏 1 显示 0 隐藏
    toolbar: 1,
    // 关闭时的回调
    hide() {
   
      console.log("hide");
    },
  };
  return (
    <div>
      <Button type="primary" onClick={
   handlePreview}>
        预览
      </Button>
      <div style={
   {
    display: "none" }}>
        <RcViewer
          options={
   options}
          ref={
   (v) => {
   
            setPreview(v);
          }}
        >
          <ul id="images">
            <li>
              <img src={
   previewImgUrl} alt="" />
            </li>
          </ul>
        </RcViewer>
      </div>