@vearvip/react-picture-preview NPM

@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	是否显示下载按钮