react zmage

React-Zmage

React-Zmage ist eine auf React-basierte Bildskalierungsregelung. Das vom Zmage -Tag eingeschlossene Bild kann skaliert werden. Sie können dieses Steuerelement verwenden, um das native IMG -Tag zu ersetzen und die Bildskalierungsfunktion einzuschließen.

Die React -Version muss größer sein als V16.6.0

Demo

Online

https://zmage.caldis.me

lokal

git clone https://github.com/Caldis/react-zmage
cd react-zmage
npm i
npm run dev

Installieren

npm i react-zmage --save

verwenden

1. Einführen von Komponenten

 import Zmage from 'react-zmage' 

2. Ersetzen Sie das IMG -Tag in der Seite durch die ZMage -Komponente

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

Jetzt können diese Bilder vergrößert und gesehen werden!

Sie können das Bild auch über Funktionsaufrufe aufrufen

 // Zmage.browsing 函数接受的参数与 <Zmage/> 组件完全一致
< a onClick = { ( ) => Zmage . browsing ( { src : imagePath } ) } >任意元素</ a > 

Verwendung in 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 }
        / >
    ) ;
} 

Grundkonfiguration

Beginnen Sie jetzt, es reicht aus, dass Sie nur die folgenden Parameter kennen müssen

Ein Online -Beispiel finden Sie unter https://zmage.caldis.me

• Grundlegende Anrufeigenschaften

Konfigurationselemente	Typ	Standardwert	beschreiben	Beispiel
src	Saite	"" "	Bild -URL, das gleiche wie src -Attribut des img -Tags	Beispiel
alt	Saite	"" "	Image -Platzhaltertext, das gleiche wie alt -Attribut des img -Tags	Beispiel
set	Objekt[]	[]	Sequenzbilder, mehrere Bildobjekte können in den set übergeben werden, um mehrere Bilder im Ansichtsmodus zu rendern, oder können verwendet werden, um vergrößerte hochauflösende Bilder zu rendern	Beispiel
defaultPage	Nummer	0	Wenn set übergeben wird, um mehrere Bilder anzuzeigen, kann es verwendet werden, um die Standardseite nach dem Öffnen anzugeben	Beispiel

Erweiterte Konfiguration

Es ist auch sehr einfach zu verwenden, ohne diese Parameter zu verstehen. Wenn Sie jedoch eine detailliertere Anpassung benötigen, können Sie den folgenden Inhalt weiter überprüfen

• Preset -Konfiguration (Beta)

Konfigurationselemente	Typ	Standardwert	beschreiben	Beispiel
preset	Saite	"Auto"	Konfigurieren Sie einfach die Funktionen und Stile der Schnittstelle, die als auto desktop mobile festgelegt werden können	Beispiel betroffene Konfigurationselemente

• Kontrollierte Eigenschaften

Konfigurationselemente	Typ	Standardwert	beschreiben	Beispiel
browsing	Boolean	leer	Steuert, ob der Betrachtungsmodus eingegeben werden soll	Beispiel

• Funktionsregelung

Konfigurationselemente	Typ	Standardwert	beschreiben	Beispiel
controller	Überprüfen	Desktop | Mobile	Legen Sie ein bestimmtes Element auf false , um die Betriebssteuerungen im Ansichtsmodus auszublenden	Beispiel
hotKey	Überprüfen	Desktop | Mobile	Legen Sie ein bestimmtes Element auf false , um Verknüpfungsschlüssel im Ansichtsmodus zu deaktivieren	Beispiel
animate	Überprüfen	Desktop | Mobile	Übergeben Sie bestimmte Parameter, um die Seitenwende -Animation anzugeben (Browsing -Animation ist derzeit nicht konfigurierbar) Optionaler Wert	Beispiel

• Schnittstellenstil

Konfigurationselemente	Typ	Standardwert	beschreiben	Beispiel
backdrop	Saite	"#Ffffff"	Steuern Sie die Hintergrundfarbe nach vergrößerter Bild	Beispiel
zIndex	Nummer	1000	Steuern Sie z-index des externen Behälters, um zu verhindern, dass er durch andere Elemente verdeckt wird	Beispiel
radius	Nummer	Desktop | Mobile	Steuern Sie die abgerundeten Ecken des Bildes im Sichtmodus	Beispiel
edge	Nummer	Desktop | Mobile	Steuert den Abstand vom Bildschirmkandel im Ansichtsmodus	Beispiel

• Lebenszyklus

Konfigurationselemente	Typ	Standardwert	beschreiben	Beispiel
onBrowsing	Func	(Browsing) => {}	Die Lebenszyklusmethode, die beim Anzeigen/ausblenden genannt wird, gibt den Anzeigestatus zurück	Beispiel
onZooming	Func	(Zooming) => {}	Die Lebenszyklusmethode, die beim Zoomieren von Ein-/Ausgängen aufgerufen wird, wird in den Zoomzustand zurückgegeben	Beispiel
onSwitching	Func	(Paging) => {}	Die Lebenszyklusmethode, die beim Schalten von Bildern aufgerufen wird, gibt die Seitennummer zurück	Beispiel
onRotating	Func	(Deg) => {}	Die Lebenszyklusmethode, die beim Drehen des Bildes genannt wird, gibt den Winkel zurück	Beispiel

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" )
} } 

beitragen

Wir sind immer herzlich eingeladen, eine PR zu starten, um uns zu helfen, den Code zu verbessern. Wenn Sie Probleme finden, begrüßen wir auch ein Problem, um Feedback zu Ihren Meinungen zu geben.

Zitat

- [Materialikons] (https://material.io/tools/icons/)

Zertifikat

React-Zmage basiert auf MIT-lizenziert