/react-zmage

一个基于 React 的可缩放图片控件 | A zoomable image container power by react

Primary LanguageJavaScriptMIT LicenseMIT

GitHub license PRs Welcome

react-zmage

react-zmage 是一个基于 React 的的图片缩放控件, 使用 Zmage 标签包裹后的图片可以获得缩放效果, 您可以用这个控件完全替代原生的 img 标签, 令其附带图片缩放功能, 本项目仍在开发中, 您可以点击 演示页面 看看示例。如果您感兴趣, 欢迎根据以下的说明使用, 也欢迎 来这里 反馈意见

需要 react 版本大于 v16.1.0

演示

在线 http://zmage.caldis.me

本地

git clone https://github.com/Caldis/react-zmage
cd react-zmage
npm i
npm exam-dev
open http://127.0.0.1:8080/

安装

npm i react-zmage --save

使用

引入

import Zmage from 'react-zmage'

将页面中的 img 标签替换为 Zmage

<img src="图片源连接"/>
👆 to 👇
<Zmage src="图片源连接"/>

现在这些图片都可以放大查看了 ！

配置

配置项 类型 默认值 描述 示例
src {String} "" 图片 Url，与 img 标签的src属性一样 示例
alt {String} "" 图片占位文字，与img标签的alt属性一样 示例
txt {String} "" 图片描述文字（暂未实现） 示例
set {{ObjectArray}} [] 如果想在查看模式下呈现多张图片，您可以使用set传入一个或多个图片对象，每个图片对象包含了src alt txt 示例
hotKey {Object} { allTrue } 如果想禁用查看模式下的特定快捷键操作，您可以在hotKey中将特定项设为false以隐藏它们 示例
controller {Object} { allTrue } 如果想隐藏查看模式下的关闭按钮、放大按钮等操作控件，您可以在controller中将特定项设为false以隐藏它们 示例

src

"http://zmage.caldis.me/imgSet/aboutDeer/demo.jpg"

alt

"图片的占位文字，尽量保持简短，描述图片作用"

txt

"图片的描述文字，用于描述图片内容"

set

set: [
    {
        // 图片 Url
        src: "http://zmage.caldis.me/imgSet/aboutDeer/1.jpg",
        // 图片占位文字
        alt: "图片的占位文字，尽量保持简短，描述图片作用",
        // 图片描述文字
        txt: "图片的描述文字，可以写很长，描述图片内容"
    }
]

hotKey

hotKey: {
    // 关闭（ESC）
    close: true,
    // 缩放（空格）
    zoom: true,
    // 翻页（左右键）
    flip: true,
}

controller

controller: {
    // 关闭按钮
    close: true,
    // 缩放按钮
    zoom: true,
    // 分页
    pagination: true,
}

贡献

我们随时欢迎您发起一个 PR 来帮助我们改进代码 如果您发现任何问题, 也欢迎 来这里 反馈意见

证书

react-zmage 基于 MIT licensed 发布