react zmage

REACT-ZMAGE

O React-Zmage é um controle de escala de imagem baseado em React. A imagem embrulhada pela tag Zmage pode ser dimensionada. Você pode usar esse controle para substituir a tag IMG nativa e incluir a função de escala de imagem.

A versão do React precisa ser maior que V16.6.0

Demonstração

On-line

https://zmage.caldis.me

local

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

Instalar

npm i react-zmage --save

usar

1. Introduzir componentes

 import Zmage from 'react-zmage' 

2. Substitua a tag IMG na página pelo componente Zmage

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

Agora essas fotos podem ser ampliadas e vistas!

Você também pode chamar a imagem através de chamadas de função

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

Use no 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 }
        / >
    ) ;
} 

Configuração básica

Comece agora, basta que você só precisa saber os seguintes parâmetros

Para um exemplo online, consulte https://zmage.caldis.me

• Propriedades básicas de chamada

Itens de configuração	tipo	valor padrão	descrever	Exemplo
src	Corda	""	URL da imagem, o mesmo que src da tag img	Exemplo
alt	Corda	""	Texto de espaço reservado para imagem, o mesmo que alt da tag img	Exemplo
set	Objeto[]	[]	Pictures de sequência, vários objetos de imagem podem ser passados ​​em set para renderizar várias imagens no modo de exibição ou pode ser usado para renderizar imagens de alta definição aumentadas	Exemplo
defaultPage	Número	0	Se set for passado para exibir várias imagens, ele poderá ser usado para especificar a página padrão após a abertura	Exemplo

Configuração avançada

Também é muito fácil de usar sem entender esses parâmetros, mas se você precisar de uma personalização mais detalhada, poderá revisar ainda mais o seguinte conteúdo

• Configuração predefinida (beta)

Itens de configuração	tipo	valor padrão	descrever	Exemplo
preset	Corda	"auto"	Configure facilmente as funções e estilos da interface, que podem ser definidos como mobile desktop auto	Exemplo de itens de configuração afetados

• Propriedades controladas

Itens de configuração	tipo	valor padrão	descrever	Exemplo
browsing	Booleano	vazio	Controla se deve entrar no modo de visualização	Exemplo

• Controle funcional

Itens de configuração	tipo	valor padrão	descrever	Exemplo
controller	Verificar	Desktop | Móvel	Defina um item específico como false para ocultar os controles da operação no modo de exibição	Exemplo
hotKey	Verificar	Desktop | Móvel	Defina um item específico como false para desativar as teclas de atalho no modo de exibição	Exemplo
animate	Verificar	Desktop | Móvel	Passe os parâmetros específicos para especificar a animação de turnos de página (navegação na animação não está configurável no momento) valor opcional	Exemplo

• Estilo de interface

Itens de configuração	tipo	valor padrão	descrever	Exemplo
backdrop	Corda	"#Ffffff"	Controle a cor do fundo após a imagem ampliada	Exemplo
zIndex	Número	1000	Controle z-index do recipiente externo para impedir que ele seja obscurecido por outros elementos	Exemplo
radius	Número	Desktop | Móvel	Controle os cantos arredondados da imagem no modo de exibição	Exemplo
edge	Número	Desktop | Móvel	Controla a distância da borda da tela no modo de exibição	Exemplo

• vida útil

Itens de configuração	tipo	valor padrão	descrever	Exemplo
onBrowsing	functão	(navegação) => {}	O método do ciclo de vida, chamado quando exibido/oculto, retornará o status da tela	Exemplo
onZooming	functão	(zooming) => {}	O método do ciclo de vida, chamado ao zoom entrar/sair, será devolvido ao estado de zoom	Exemplo
onSwitching	functão	(paging) => {}	Método do ciclo de vida, chamado ao trocar de imagens, retornará o número da página	Exemplo
onRotating	functão	(deg) => {}	Método do ciclo de vida, chamado ao girar a imagem, retornará o ângulo	Exemplo

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

contribuir

Somos sempre convidados a lançar um PR para nos ajudar a melhorar o código. Se você encontrar algum problema, também é possível lançar um problema para fornecer feedback sobre suas opiniões.

Citar

- [Ícones de Material] (https://material.io/tools/icons/)

Certificado

O React-Zmage é baseado no MIT licenciado