react zmage
0.8.5
react-zmage 是一個基於React 的的圖片縮放控件, 使用Zmage 標籤包裹後的圖片可以獲得縮放效果, 您可以用這個控件替代原生的img 標籤, 令其附帶圖片縮放功能
需react 版本大於v16.6.0
在線
https://zmage.caldis.me
本地
git clone https://github.com/Caldis/react-zmage
cd react-zmage
npm i
npm run devnpm i react-zmage --save import Zmage from 'react-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 }
/ >
) ;
} | 配置項 | 類型 | 預設值 | 描述 | 示例 |
|---|---|---|---|---|
src | String | "" | 圖片Url，與img標籤的src屬性相同 | 示例 |
alt | String | "" | 圖片佔位文字，與img標籤的alt屬性相同 | 示例 |
set | Object[] | [] | 序列圖片, 可以在set中傳入多個圖片對像用於在查看模式下呈現多張圖片，也可用於呈現放大後的高清圖片 | 示例 |
defaultPage | Number | 0 | 如果傳入了set來展示多張圖片, 可以用於指定打開後的默認頁 | 示例 |
| 配置項 | 類型 | 預設值 | 描述 | 示例 |
|---|---|---|---|---|
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 : "图片的占位文字，作为图片的标题, 请尽量保持简短" ,
}
] }defaultPageset: [
{
// 图片 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 來反饋你的意見
react-zmage 基於MIT licensed 發布
