react zmage
0.8.5
React-Zmage est un contrôle de mise à l'échelle d'image basé sur React. L'image enveloppée par la balise Zmage peut être mise à l'échelle. Vous pouvez utiliser ce contrôle pour remplacer la balise IMG native et inclure la fonction de mise à l'échelle de l'image.
La version React doit être supérieure à V16.6.0
En ligne
https://zmage.caldis.me
locale
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 }
/ >
) ;
} | Éléments de configuration | taper | valeur par défaut | décrire | Exemple |
|---|---|---|---|---|
src | Chaîne | "" | URL d'image, comme src de la balise img | Exemple |
alt | Chaîne | "" | Texte de placement d'image, identique à alt de la balise img | Exemple |
set | Objet[] | [] | Images de séquence, plusieurs objets d'image peuvent être passés en set pour rendre plusieurs images en mode vue, ou peuvent être utilisées pour rendre des images à haute définition agrandies | Exemple |
defaultPage | Nombre | 0 | Si set est passé pour afficher plusieurs images, il peut être utilisé pour spécifier la page par défaut après l'ouverture | Exemple |
| Éléments de configuration | taper | valeur par défaut | décrire | Exemple |
|---|---|---|---|---|
preset | Chaîne | "auto" | Configurez facilement les fonctions et les styles de l'interface, qui peuvent être définis sous forme de mobile desktop auto | Exemple d'éléments de configuration affectés |
| Éléments de configuration | taper | valeur par défaut | décrire | Exemple |
|---|---|---|---|---|
browsing | Booléen | vide | Contrôle s'il faut entrer le mode d'affichage | Exemple |
| Éléments de configuration | taper | valeur par défaut | décrire | Exemple |
|---|---|---|---|---|
controller | Vérifier | Desktop | Mobile | Définissez un élément spécifique sur false pour masquer les commandes de fonctionnement en mode Affichage | Exemple |
hotKey | Vérifier | Desktop | Mobile | Définissez un élément spécifique sur false pour désactiver les touches de raccourci en mode Affichage | Exemple |
animate | Vérifier | Desktop | Mobile | Passez des paramètres spécifiques pour spécifier l'animation de virage de la page (l'animation de navigation n'est pas actuellement configurable) Valeur facultative | Exemple |
| Éléments de configuration | taper | valeur par défaut | décrire | Exemple |
|---|---|---|---|---|
backdrop | Chaîne | "#Ffffff" | Contrôlez la couleur d'arrière-plan après une image élargie | Exemple |
zIndex | Nombre | 1000 | Contrôlez z-index du récipient externe pour éviter qu'il ne soit obscurci par d'autres éléments | Exemple |
radius | Nombre | Desktop | Mobile | Contrôlez les coins arrondis de l'image en mode View | Exemple |
edge | Nombre | Desktop | Mobile | Contrôle la distance entre le bord de l'écran en mode Affichage | Exemple |
| Éléments de configuration | taper | valeur par défaut | décrire | Exemple |
|---|---|---|---|---|
onBrowsing | func | (navigation) => {} | La méthode du cycle de vie, appelé lors de l'affichage / masquer, renvoie l'état d'affichage | Exemple |
onZooming | func | (zoom) => {} | La méthode du cycle de vie, appelé lors du zoom dans / out, sera retournée à l'état de zoom | Exemple |
onSwitching | func | (Paging) => {} | La méthode du cycle de vie, appelé lors du changement d'images, renvoie le numéro de page | Exemple |
onRotating | func | (deg) => {} | La méthode du cycle de vie, appelé lors de la rotation de l'image, renvoie l'angle | Exemple |
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" )
} } Nous sommes toujours les bienvenus pour lancer un PR pour nous aider à améliorer le code. Si vous trouvez des problèmes, nous nous réjouissons également de lancer un problème pour fournir des commentaires sur vos opinions.
React-Zmage est basé sur le MIT sous licence
