react zmage
0.8.5
React-Zmage es un control de escala de imágenes basado en React. La imagen envuelta por la etiqueta ZMage se puede escalar. Puede usar este control para reemplazar la etiqueta IMG nativa e incluir la función de escala de imágenes.
La versión React debe ser mayor que V16.6.0
En línea
https://zmage.caldis.me
local
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 }
/ >
) ;
} | Elementos de configuración | tipo | valor predeterminado | describir | Ejemplo |
|---|---|---|---|---|
src | Cadena | " | URL de imagen, lo mismo que src de la etiqueta img | Ejemplo |
alt | Cadena | " | Texto de marcador de posición de imagen, lo mismo que alt de la etiqueta img | Ejemplo |
set | Objeto[] | [] | Imágenes de secuencia, se pueden pasar múltiples objetos de imagen en set para representar múltiples imágenes en modo de vista, o se pueden usar para realizar imágenes de alta definición ampliada | Ejemplo |
defaultPage | Número | 0 | Si se pasa set para mostrar varias imágenes, se puede usar para especificar la página predeterminada después de abrir | Ejemplo |
| Elementos de configuración | tipo | valor predeterminado | describir | Ejemplo |
|---|---|---|---|---|
preset | Cadena | "auto" | Configure fácilmente las funciones y estilos de la interfaz, que se pueden configurar como mobile desktop auto | Ejemplo de elementos de configuración afectados |
| Elementos de configuración | tipo | valor predeterminado | describir | Ejemplo |
|---|---|---|---|---|
browsing | Booleano | vacío | Controla si ingresar al modo de visualización | Ejemplo |
| Elementos de configuración | tipo | valor predeterminado | describir | Ejemplo |
|---|---|---|---|---|
controller | Controlar | Escritorio | Móvil | Establezca un elemento específico en false para ocultar los controles de operación en modo View | Ejemplo |
hotKey | Controlar | Escritorio | Móvil | Establezca un elemento específico en false para deshabilitar las teclas de acceso directo en el modo de vista | Ejemplo |
animate | Controlar | Escritorio | Móvil | Pase los parámetros específicos para especificar la animación de giro de la página (la animación de navegación no está configurable actualmente) Valor opcional | Ejemplo |
| Elementos de configuración | tipo | valor predeterminado | describir | Ejemplo |
|---|---|---|---|---|
backdrop | Cadena | "#Ffffff" | Controlar el color de fondo después de una imagen ampliada | Ejemplo |
zIndex | Número | 1000 | Controle z-index del contenedor externo para evitar que otros elementos sean oscurecidos por otros elementos | Ejemplo |
radius | Número | Escritorio | Móvil | Controlar las esquinas redondeadas de la imagen en modo de vista | Ejemplo |
edge | Número | Escritorio | Móvil | Controla la distancia desde el borde de la pantalla en modo de vista | Ejemplo |
| Elementos de configuración | tipo | valor predeterminado | describir | Ejemplo |
|---|---|---|---|---|
onBrowsing | concurrido | (navegación) => {} | El método de ciclo de vida, llamado cuando se muestra/ocultar, devolverá el estado de la pantalla | Ejemplo |
onZooming | concurrido | (zooming) => {} | El método de ciclo de vida, llamado al zoom en/out, será devuelto al estado de zoom | Ejemplo |
onSwitching | concurrido | (Paging) => {} | El método de ciclo de vida, llamado al cambiar de imágenes, devolverá el número de página | Ejemplo |
onRotating | concurrido | (deg) => {} | El método del ciclo de vida, llamado al girar la imagen, devolverá el ángulo | Ejemplo |
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" )
} } Siempre somos bienvenidos a lanzar un PR para ayudarnos a mejorar el código. Si encuentra algún problema, también damos la bienvenida a lanzar un problema para proporcionar comentarios sobre sus opiniones.
React-Zmage se basa en MIT con licencia
