react zmage

react-zmage

React-Zmage adalah kontrol penskalaan gambar berbasis reaksi. Gambar yang dibungkus oleh tag zmage dapat diskalakan. Anda dapat menggunakan kontrol ini untuk mengganti tag IMG asli dan memasukkan fungsi penskalaan gambar.

Versi React harus lebih besar dari v16.6.0

Demo

On line

https://zmage.caldis.me

lokal

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

Memasang

npm i react-zmage --save

menggunakan

1. Memperkenalkan komponen

 import Zmage from 'react-zmage' 

2. Ganti tag IMG di halaman dengan komponen zmage

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

Sekarang gambar -gambar ini dapat diperbesar dan dilihat!

Anda juga dapat memanggil gambar melalui panggilan fungsi

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

Gunakan di 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 }
        / >
    ) ;
} 

Konfigurasi Dasar

Mulailah sekarang, sudah cukup bahwa Anda hanya perlu mengetahui parameter berikut

Untuk contoh online, lihat https://zmage.caldis.me

• Properti Panggilan Dasar

Item Konfigurasi	jenis	nilai default	menggambarkan	Contoh
src	Rangkaian	""	URL gambar, sama dengan atribut src dari tag img	Contoh
alt	Rangkaian	""	Teks Placeholder Gambar, sama seperti atribut alt dari tag img	Contoh
set	Obyek[]	[]	Gambar urutan, beberapa objek gambar dapat dilewati dalam set untuk membuat beberapa gambar dalam mode tampilan, atau dapat digunakan untuk membuat gambar definisi tinggi yang diperbesar	Contoh
defaultPage	Nomor	0	Jika set dilewatkan untuk menampilkan beberapa gambar, itu dapat digunakan untuk menentukan halaman default setelah dibuka	Contoh

Konfigurasi lanjutan

Ini juga sangat mudah digunakan tanpa memahami parameter ini, tetapi jika Anda memerlukan kustomisasi lebih rinci, Anda dapat meninjau lebih lanjut konten berikut

• Konfigurasi preset (beta)

Item Konfigurasi	jenis	nilai default	menggambarkan	Contoh
preset	Rangkaian	"mobil"	Mudah mengonfigurasi fungsi dan gaya antarmuka, yang dapat diatur sebagai mobile desktop auto	Contoh item konfigurasi yang terpengaruh

• Properti Terkendali

Item Konfigurasi	jenis	nilai default	menggambarkan	Contoh
browsing	Boolean	kosong	Mengontrol apakah akan memasuki mode tampilan	Contoh

• Kontrol fungsional

Item Konfigurasi	jenis	nilai default	menggambarkan	Contoh
controller	Memeriksa	Desktop | Mobile	Atur item tertentu ke false untuk menyembunyikan kontrol operasi dalam mode tampilan	Contoh
hotKey	Memeriksa	Desktop | Mobile	Setel item tertentu menjadi false untuk menonaktifkan tombol pintasan dalam mode tampilan	Contoh
animate	Memeriksa	Desktop | Mobile	Lewati parameter spesifik untuk menentukan halaman belok animasi (animasi browsing saat ini tidak dapat dikonfigurasi) Nilai opsional	Contoh

• Gaya antarmuka

Item Konfigurasi	jenis	nilai default	menggambarkan	Contoh
backdrop	Rangkaian	"#FFFFFF"	Kontrol warna latar belakang setelah gambar yang diperbesar	Contoh
zIndex	Nomor	1000	Kontrol z-index dari wadah eksternal untuk mencegahnya dikaburkan oleh elemen lain	Contoh
radius	Nomor	Desktop | Mobile	Kontrol sudut bulat gambar dalam mode tampilan	Contoh
edge	Nomor	Desktop | Mobile	Mengontrol jarak dari tepi layar dalam mode tampilan	Contoh

• siklus hidup

Item Konfigurasi	jenis	nilai default	menggambarkan	Contoh
onBrowsing	func	(browsing) => {}	Metode siklus hidup, dipanggil saat ditampilkan/sembunyikan, akan mengembalikan status tampilan	Contoh
onZooming	func	(zooming) => {}	Metode siklus hidup, dipanggil saat memperbesar/keluar, akan dikembalikan ke negara zoom	Contoh
onSwitching	func	(paging) => {}	Metode siklus hidup, dipanggil saat beralih gambar, akan mengembalikan nomor halaman	Contoh
onRotating	func	(deg) => {}	Metode siklus hidup, dipanggil saat memutar gambar, akan mengembalikan sudut	Contoh

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

menyumbang

Kami selalu dipersilakan untuk meluncurkan PR untuk membantu kami meningkatkan kode. Jika Anda menemukan masalah, kami juga dipersilakan untuk meluncurkan masalah untuk memberikan umpan balik tentang pendapat Anda.

Mengutip

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

Sertifikat

React-Zmage didasarkan pada MIT berlisensi