Skip to content

candy-girl/images-viewer-react

Repository files navigation

多图/pdf 预览组件

NPM version

react image viewers.

简介

因为需要支持图片和 pdf 的预览、放大、缩小、折叠、打印下载等功能,所以写了这个组件

安装

react >= 16.8.0 | react-dom >= 16.8.0

npm install images-viewer-react --save

使用方法

import * as React from 'react'
import Viewer from 'images-viewer-react'

function App() {
  const [visible, setVisible] = React.useState(false)

  return (
    <div>
      <button
        onClick={() => {
          setVisible(true)
        }}
      >
        show
      </button>
      <Viewer
        visible={visible}
        onClose={() => {
          setVisible(false)
        }}
        images={[{ src: '', alt: '' }]}
      />
    </div>
  )
}

参数

props type default description required
visible string false 是否显示 true
onClose function - 关闭预览窗口函数 true
images ImageDecorator[] [] 预览的图片数组 true
activeIndex number 0 当前预览图片的 index false
zIndex number 1000 预览图片的时候 zIndex false
container HTMLElement null inline 模式的容器 false
drag boolean true 拖拽图片的回调 false
attribute boolean true 是否显示图片属性 false
zoomable boolean true 是否显示缩放按钮 false
rotatable boolean true 是否显示旋转按钮 false
scalable boolean true 是否显示缩放按钮 false
onMaskClick (e) => void - 当蒙版被点击时的回调函数 false
downloadable boolean false 是否显示下载按钮 false
noClose boolean false 是否隐藏关闭按钮 false
noNavbar boolean false 是否隐藏导航条 false
noToolbar boolean false 是否隐藏工具栏 false
noImgDetails boolean false 是否隐藏图片详情(width/height) false
noFooter boolean false 是否隐藏不呈现页脚 false
changeable boolean true 是否隐藏更改按钮 false
customToolbar (defaultToolbarConfigs: ToolbarConfig[]) => ToolbarConfig[] - 自定义工具栏 false
zoomSpeed number 0.05 变焦速度 false
defaultSize ViewerImageSize - 默认图片大小 false
defaultImg viewerdefaultimg - 如果图片加载失败显示的默认图片 false
disableKeyboardSupport boolean false 禁用键盘支持 false
noResetZoomAfterChange boolean false 没有复位变焦后的图像变化 false
noLimitInitializationSize boolean false 没有限制图像初始化大小 false
defaultScale number 1 默认的放大缩小倍数 false
onChange (activeImage: ImageDecorator, index: number) => void - 当图片改变时回调的回调 false
onPreButton () => void - 点击上一张(当 activeIndex<5>) false
onNextButton () => void - 点击下一张(当 activeIndex>images.length-5 false
loop boolean true 导航条是否允许图片可循环 false
disableMouseZoom boolean false 是否禁用鼠标滚动缩放图片大小 false
downloadInNewWindow boolean false 是否在新窗口中下载 false
className string - 自定义样式名 false
showTotal boolean true 是否显示总数和范围 false
maxScale number - 最大缩放 false
minScale number 0.1 最小缩放 false

图片资源相关参数

props type default description required
src string - 图片资源 true
alt string - 图片描述 false
downloadUrl string - 图片下载的地址 false
defaultSize ViewerImageSize - 图片大小 false

预览图片的大小

props type default description required
width number - 图片宽度 true
height number - 图片高度 true

默认图片相关属性

props type default description required
src number - 图片资源 true
width number - 图片宽度 false
height number - 图片高度 false

工具栏配置

props type default description required
key string - 对应的 key true
render React.ReactNode - 工具 render 的内容 false
onClick function - 点击时候的回调 false

键盘按钮支持

  • Esc: 关闭预览的视图.
  • : 查看上一张.
  • : 查看下一张.
  • : 放大图片.
  • : 缩小图片.
  • Ctrl + 1: 重置图片或者 pdf 资源.
  • Ctrl + ←: 图片左旋转.
  • Ctrl + →: 图片又旋转.

License

MIT

About

Multi - picture preview, support zooming, rotating, fast switching

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published