react-zmage 是一个基于 React 的的图片缩放控件, 使用 Zmage 标签包裹后的图片可以获得缩放效果, 您可以用这个控件替代原生的 img 标签, 令其附带图片缩放功能
需 react 版本大于 v16.6.0
演示
在线
本地
git clone https://github.com/Caldis/react-zmagecd react-zmagenpm inpm run dev
安装
npm i react-zmage --save
使用
1.引入
2.将页面中的 img 标签替换为 Zmage
<img src="图片源连接"/>👆 to 👇<Zmage src="图片源连接"/>
现在这些图片都可以放大查看了 !
基础配置
立即上手, 你仅仅需要了解下面的几个参数就足够了
https://zmage.caldis.me
在线示例, 请参见
配置项 | 类型 | 默认值 | 描述 | 示例 |
---|---|---|---|---|
src |
String | "" | 图片 Url,与 img 标签的 src 属性相同 |
示例 |
alt |
String | "" | 图片占位文字,与 img 标签的 alt 属性相同 |
示例 |
set |
Object[] | [] | 序列图片, 可以在 set 中传入多个图片对象用于在查看模式下呈现多张图片,也可用于呈现放大后的高清图片 |
示例 |
defaultPage |
Number | 0 | 如果传入了set 来展示多张图片, 可以用于指定打开后的默认页 |
示例 |
高级配置
不需要了解这些参数也可以很好的使用, 但如果你需要更详细的定制, 可以进一步查阅下面的内容
- 预设配置 (beta)
配置项 | 类型 | 默认值 | 描述 | 示例 |
---|---|---|---|---|
preset |
String | "auto" | 轻松配置界面的功能及样式, 可设置为 auto desktop mobile |
示例 受影响的配置项 |
- 功能控制
配置项 | 类型 | 默认值 | 描述 | 示例 |
---|---|---|---|---|
controller |
Object | 桌面|移动 | 将特定项设为 false 来隐藏查看模式下的操作控件 |
示例 |
hotKey |
Object | 桌面|移动 | 将特定项设为 false 来禁用查看模式下的快捷键 |
示例 |
- 界面样式
配置项 | 类型 | 默认值 | 描述 | 示例 |
---|---|---|---|---|
backdrop |
String | "#FFFFFF" | 控制图片放大后的背景色 | 示例 |
zIndex |
Number | 1000 | 控制外部容器的 z-index , 防止被其他元素遮挡 |
示例 |
radius |
Number | 桌面|移动 | 控制图片在查看模式下的圆角 | 示例 |
edge |
Number | 桌面|移动 | 控制图片在查看模式下距离屏幕边缘的距离 | 示例 |
- 生命周期
配置项 | 类型 | 默认值 | 描述 | 示例 |
---|---|---|---|---|
onBrowsing |
func | (browsing)=>{} | 生命周期方法, 在显示/隐藏时调用, 会回传显示状态 | 示例 |
onZooming |
func | (zooming)=>{} | 生命周期方法, 在放大/缩小时调用, 会回传缩放状态 | 示例 |
onSwitching |
func | (paging)=>{} | 生命周期方法, 在切换图片时调用, 会回传页码 | 示例 |
onRotating |
func | (deg)=>{} | 生命周期方法, 在旋转图片时调用, 会回传角度 | 示例 |
src
"http://zmage.caldis.me/imgSet/childsDream/demo.jpg"
alt
"图片的占位文字,作为图片的标题, 请尽量保持简短"
set
// 如果设置了 Set, 则进入查看模式后第一张图片将会是 set 的首图, 而不是 src// 如果你需要在查看模式中呈现高精度图片, 可以将其设置为 set 的首图, 或使用 defaultPage 指定set= // 图片 Url src: "http://zmage.caldis.me/imgSet/childsDream/1.jpg" // 图片占位文字 alt: "图片的占位文字,作为图片的标题, 请尽量保持简短" // 图片样式 style: borderRadius: 30 // 图片类名 className: 'testClassName' // 另一个图片 Url src: "http://zmage.caldis.me/imgSet/childsDream/2.jpg" // 另一段图片占位文字 alt: "图片的占位文字,作为图片的标题, 请尽量保持简短"
defaultPage
set: // 图片 Url src: "http://zmage.caldis.me/imgSet/childsDream/1.jpg" // 图片占位文字 alt: "图片的占位文字,尽量保持简短,描述图片作用"
hotKey
hotKey= // 关闭(ESC) close: true // 缩放(空格) zoom: true // 翻页(左右) flip: true
controller
controller= // 关闭按钮 close: true // 缩放按钮 zoom: true // 下载按钮 download: true // 旋转按钮 rotate: true // 翻页按钮 flip: true // 多页指示 pagination: true
backdrop
backdrop="linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(26,94,215,1) 100%)"
zIndex
zIndex=19260817
radius
radius=5
edge
edge=20
onBrowsing
onBrowsing= { console}
onZooming
onZooming= { console}
onSwitching
onSwitching= { console}
onRotating
onRotating= { console}
贡献
我们随时欢迎发起一个 PR 来帮助我们改进代码 如果发现任何问题, 也欢迎 发起一个ISSUE 来反馈你的意见
引用
- [Material Icons](https://material.io/tools/icons/)证书
react-zmage 基于 MIT licensed 发布