@vearvip/react-picture-preview

@vearvip/react-picture-preview 是一个基于 React 和 rc-image 的图片预览组件，具备图片旋转、翻转、缩放和下载等功能。

安装

使用 npm 安装：

npm install @vearvip/react-picture-preview

或使用 yarn 安装：

yarn add @vearvip/react-picture-preview

使用方法

导入组件

import { preview } from '@vearvip/react-picture-preview';

使用示例

import React from 'react';
import { preview } from '@vearvip/react-picture-preview';

const imageList = [
  'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ngiJQaLQELEAAAAAAAAAAABkARQnAQ',
];


const App = () => {
  return (
    <div>
      <div>

        <button
          onClick={() => {
            preview({
              src: imageList[0],
              actions: {
                rotateLeft: false,
                rotateRight: false,
                zoomIn: false,
                zoomOut: false,
                flipX: false,
                flipY: false,
                // download: false
              }
            });
          }}
        >
          查看图片1-单张
        </button>
        <button
          onClick={() => {
            preview({
              src: imageList[1],
            });
          }}
        >
          查看图片2-单张
        </button>
      </div>
      <div>

        <button
          onClick={() => {
            preview({
              src: imageList[0],
              images: imageList
            });
          }}
        >
          查看图片1-多张
        </button>
        <button
          onClick={() => {
            preview({
              src: imageList[1],
              images: imageList
            });
          }}
        >
          查看图片2-多张
        </button>
      </div>
    </div>
  );
};

export default App;

API

preview(options) 函数参数

preview 函数接收一个对象，该对象包含以下属性：

| 属性名 | 类型 | 必填 | 描述 | | --------- | -------- | ----- | --------------------------------------------------------------------------------------------------------------------- | | src | string | 是 | 要预览的图片地址。 | | images | string[] | 否 | 图片地址数组，如果不提供，则预览单张图片。 | | onClose | function | 否 | 关闭预览时的回调函数。 | | actions | object | 否 | 配置哪些功能按钮是可用的，具体属性详见下表。 |

actions 对象属性

actions 对象包含以下可选布尔属性，指示对应的功能按钮是否显示（默认都显示）：

| 属性名 | 类型 | 描述 | | ----------- | ----- | ------------------------------------ | | rotateLeft | bool | 是否显示向左旋转按钮 | | rotateRight | bool | 是否显示向右旋转按钮 | | zoomIn | bool | 是否显示放大按钮 | | zoomOut | bool | 是否显示缩小按钮 | | flipX | bool | 是否显示水平翻转按钮 | | flipY | bool | 是否显示垂直翻转按钮 | | download | bool | 是否显示下载按钮 |

贡献

欢迎贡献以及反馈问题。请在提交 Pull Request 之前先创建一个 Issue 以便讨论。