@vearvip/react-picture-preview v1.0.0-beta.4

@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 函数接收一个对象，该对象包含以下属性：

actions 对象属性

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

贡献

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