react-zmage
A zoomable image container
Last updated 6 years ago
by caldis
.
MIT
·
Repository
·
Bugs
·
Original npm
·
Tarball
·
package.json
$ npm install react-zmage
SYNC missed versions from
official npm registry.
react-zmage
react-zmage 是一个基于 React 的的图片缩放控件, 使用 Zmage 标签包裹后的图片可以获得缩放效果, 您可以用这个控件替代原生的 img 标签, 令其附带图片缩放功能
需 react 版本大于 v16.6.0
演示
在线
本地
git clone https://github.com/Caldis/react-zmage
cd react-zmage
npm i
npm run dev
安装
npm i react-zmage --save
使用
1.引入组件
import Zmage from 'react-zmage'
2.将页面中的 img 标签替换为 Zmage 组件
<img src="图片源连接"/>
👆 to 👇
<Zmage src="图片源连接"/>
现在这些图片都可以放大查看了 ！
也可以通过函数调用来唤出图片
// Zmage.browsing 函数接受的参数与 <Zmage/> 组件完全一致
<a onClick={() => Zmage.browsing({ src:imagePath })}>任意元素</a>
在typescript中使用
import ReactZmage from 'react-zmage';
// 在生命周期等方法中使用
public componentDidMount() {
const zmage = new ReactZmage({
// ...options
});
}
// 也支持组件方式使用
public render(): JSX.Element {
const defaultConfig = {
src: 'http://zmage.caldis.me/imgSet/childsDream/demo.jpg',
alt: '示例图片',
};
return (
<ReactZmage
{...defaultConfig}
/>
);
}
基础配置
立即上手, 你仅仅需要了解下面的几个参数就足够了
在线示例, 请参见 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 |
示例 受影响的配置项 |
- 受控属性
| 配置项 | 类型 | 默认值 | 描述 | 示例 |
|---|---|---|---|---|
browsing |
Boolean | empty | 控制是否进入查看模式 | 示例 |
- 功能控制
| 配置项 | 类型 | 默认值 | 描述 | 示例 |
|---|---|---|---|---|
controller |
查看 | 桌面|移动 | 将特定项设为 false 来隐藏查看模式下的操作控件 |
示例 |
hotKey |
查看 | 桌面|移动 | 将特定项设为 false 来禁用查看模式下的快捷键 |
示例 |
animate |
查看 | 桌面|移动 | 传入特定的参数指定翻页动画（browsing 动画暂不可配置） 可选值 | 示例 |
- 界面样式
| 配置项 | 类型 | 默认值 | 描述 | 示例 |
|---|---|---|---|---|
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: "图片的占位文字，尽量保持简短，描述图片作用",
}
]
browsing
browsing={this.state.contrlledZmageState}
controller
controller={{
// 关闭按钮
close: true,
// 缩放按钮
zoom: true,
// 下载按钮
download: true,
// 旋转按钮
rotate: true,
// 翻页按钮
flip: true,
// 多页指示
pagination: true,
}}
hotKey
hotKey={{
// 关闭（ESC）
close: true,
// 缩放（空格）
zoom: true,
// 翻页（左右）
flip: true,
}}
animate
animate={{
flip: 'fade',
}}
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={state => {
console.info("Browsing State: ", state)
}}
onZooming
onZooming={state => {
console.info("Zooming State: ", state)
}}
onSwitching
onSwitching={page => {
console.info("Switching page: ", page)
}}
onRotating
onRotating={deg => {
console.info("Rotating State: ", deg, "deg")
}}
贡献
我们随时欢迎发起一个 PR 来帮助我们改进代码 如果发现任何问题, 也欢迎 发起一个ISSUE 来反馈你的意见
引用
- [Material Icons](https://material.io/tools/icons/)证书
react-zmage 基于 MIT licensed 发布
Current Tags
- 0.8.5-beta.15 ... beta (5 years ago)
- 0.8.5-beta.37 ... latest (3 years ago)
90 Versions
- 0.8.5-beta.37 ... 3 years ago
- 0.8.5-beta.36 ... 5 years ago
- 0.8.5-beta.35 ... 5 years ago
- 0.8.5-beta.34 ... 5 years ago
- 0.8.5-beta.33 ... 5 years ago
- 0.8.5-beta.32 ... 5 years ago
- 0.8.5-beta.31 ... 5 years ago
- 0.8.5-beta.30 ... 5 years ago
- 0.8.5-beta.28 ... 5 years ago
- 0.8.5-beta.27 ... 5 years ago
- 0.8.5-beta.26 ... 5 years ago
- 0.8.5-beta.25 ... 5 years ago
- 0.8.5-beta.24 ... 5 years ago
- 0.8.5-beta.23 ... 5 years ago
- 0.8.5-beta.22 ... 5 years ago
- 0.8.5-beta.21 ... 5 years ago
- 0.8.5-beta.20 ... 5 years ago
- 0.8.5-beta.19 ... 5 years ago
- 0.8.5-beta.18 ... 5 years ago
- 0.8.5-beta.17 ... 5 years ago
- 0.8.5-beta.16 ... 5 years ago
- 0.8.5-beta.15 ... 5 years ago
- 0.8.5-beta.14 ... 5 years ago
- 0.8.5-beta.13 ... 5 years ago
- 0.8.5-beta.12 ... 5 years ago
- 0.8.5-beta.11 ... 5 years ago
- 0.8.5-beta.10 ... 5 years ago
- 0.8.5-beta.9 ... 5 years ago
- 0.8.5-beta.8 ... 5 years ago
- 0.8.5-beta.7 ... 5 years ago
- 0.8.5-beta.6 ... 5 years ago
- 0.8.5-beta.5 ... 5 years ago
- 0.8.5-beta.2 ... 5 years ago
- 0.8.5-beta.1 ... 5 years ago
- 0.8.5-beta.0 ... 5 years ago
- 0.8.5 ... 5 years ago
- 0.8.4 ... 5 years ago
- 0.8.3 ... 5 years ago
- 0.8.2 ... 5 years ago
- 0.8.1 ... 5 years ago
- 0.8.0 ... 5 years ago
- 0.7.6 ... 5 years ago
- 0.7.5 ... 6 years ago
- 0.7.3 ... 6 years ago
- 0.7.2 ... 6 years ago
- 0.7.1 ... 6 years ago
- 0.7.0 ... 6 years ago
- 0.6.11 ... 6 years ago
- 0.6.10 ... 6 years ago
- 0.6.9 ... 6 years ago
- 0.6.8 ... 6 years ago
- 0.6.7 ... 6 years ago
- 0.6.6 ... 6 years ago
- 0.6.5 ... 6 years ago
- 0.6.4 ... 6 years ago
- 0.6.2 ... 6 years ago
- 0.6.1 ... 6 years ago
- 0.6.0 ... 6 years ago
- 0.5.15 ... 6 years ago
- 0.5.14 ... 6 years ago
- 0.5.13 ... 6 years ago
- 0.5.12 ... 6 years ago
- 0.5.11 ... 6 years ago
- 0.5.10 ... 6 years ago
- 0.5.9 ... 6 years ago
- 0.5.8 ... 6 years ago
- 0.5.7 ... 6 years ago
- 0.5.5 ... 6 years ago
- 0.5.4 ... 6 years ago
- 0.5.2 ... 6 years ago
- 0.5.1 ... 6 years ago
- 0.5.0 ... 6 years ago
- 0.4.0 ... 6 years ago
- 0.3.0 ... 6 years ago
- 0.2.2 ... 6 years ago
- 0.2.1 ... 6 years ago
- 0.2.0 ... 6 years ago
- 0.1.7 ... 7 years ago
- 0.1.6 ... 7 years ago
- 0.1.5 ... 7 years ago
- 0.1.4 ... 7 years ago
- 0.1.1 ... 7 years ago
- 0.1.0 ... 7 years ago
- 0.0.7 ... 7 years ago
- 0.0.6 ... 7 years ago
- 0.0.5 ... 7 years ago
- 0.0.4 ... 7 years ago
- 0.0.3 ... 7 years ago
- 0.0.2 ... 7 years ago
- 0.0.1 ... 7 years ago
Maintainers (1)
caldis
Downloads
Total
1
Today
0
This Week
0
This Month
0
Last Day
0
Last Week
0
Last Month
0
Dependencies (3)
- prop-types ^15.6.2
- react ^16.6.3
- react-dom ^16.6.3
Dev Dependencies (30)
- @babel/core ^7.1.6
- @babel/plugin-proposal-class-properties ^7.1.0
- @babel/preset-env ^7.1.6
- @babel/preset-react ^7.0.0
- @babel/register ^7.0.0
- @babel/runtime ^7.1.5
- autoprefixer ^9.3.1
- babel-loader ^8.0.4
- cross-env ^5.2.0
- css-loader ^1.0.1
- file-loader ^2.0.0
- html-webpack-plugin ^3.2.0
- less ^3.8.1
- less-loader ^4.1.0
- open-browser-webpack-plugin 0.0.5
- postcss-loader ^3.0.0
- prismjs ^1.15.0
- react-hot-loader ^4.3.12
- react-prism ^4.3.2
- source-map-support ^0.5.9
- style-loader ^0.23.1
- transfer-webpack-plugin ^0.1.4
- uglifyjs-webpack-plugin ^2.0.1
- url-loader ^1.1.2
- webpack ^4.26.0
- webpack-bundle-analyzer ^3.0.3
- webpack-cli ^3.1.2
- webpack-dev-server ^3.1.10
- webpack-merge ^4.1.4
- webpack-node-externals ^1.7.2
Dependents (0)
None