1.5.2 • Published 2 years ago
images-viewer-react v1.5.2
多图/pdf 预览组件
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
1.5.2
2 years ago
1.5.1
2 years ago
1.5.0
2 years ago
1.4.9
3 years ago
1.4.8
3 years ago
1.4.7
3 years ago
1.4.6
3 years ago
1.4.5
3 years ago
1.4.4
3 years ago
1.4.3
3 years ago
1.4.2
3 years ago
1.4.1
3 years ago
1.4.0
3 years ago
1.3.9
3 years ago
1.3.7
3 years ago
1.3.6
3 years ago
1.3.5
3 years ago
1.3.4
3 years ago
1.3.8
3 years ago
1.3.3
3 years ago
1.3.2
3 years ago
1.3.1
3 years ago
1.3.0
3 years ago
1.2.9
3 years ago
1.2.8
3 years ago
1.2.7
3 years ago
1.2.6
3 years ago
1.2.5
3 years ago
1.2.4
3 years ago
1.2.3
3 years ago
1.2.2
3 years ago
1.2.1
3 years ago
1.2.0
3 years ago
1.1.9
3 years ago
1.1.8
3 years ago
1.1.7
3 years ago
1.1.6
3 years ago
1.1.5
3 years ago
1.1.4
3 years ago
1.1.3
3 years ago
1.1.1
3 years ago
1.1.0
3 years ago
1.0.9
3 years ago
1.1.2
3 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.5
3 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago