ImageViewer组件（react）

组件功能

在pixui页面中自适应展示大图。功能逐渐完善中，目前仅支持图片静态展示。后续将逐渐支持滑动、缩放，旋转等功能。

组件实现

基于preact框架

支持属性

| 属性名 | 取值 | | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | src |必传属性:string ，所需展示的大图的url | | onClose | 必传属性:Function ，触发关闭时执行的回调函数 | | backgroundStyle |可选属性:CSSProperties ，底层背景样式，通常为全屏的半透明黑色遮罩，如不传值，则默认为{width:'100%',height:'100%',display: 'flex',flexDirection: 'row',justifyContent: 'center',alignItems: 'center',} | | imageBoxStyle | 可选属性:CSSProperties ，当希望ImageViewer中要展示的图片有背景框时使用；如不传值，则默认没有背景框。 | | imageAreaStyle | 可选属性:CSSProperties ，主要用于控制图片显示的大小和范围。当前图片的长或宽大于该属性所指定的大小范围时，将自适应等比例缩小到该范围内，并完整展示。 在不传入任何值的情况下，图片默认显示范围为 imageBoxStyle 大小的 80% 80%。 | | imageStyle | 可选属性:CSSProperties，图片样式。** 注意，不可以在该样式中传入width、height等指定图片大小的属性，图片大小在组件中会根据imageArea尺寸自适应计算，在imageStyle中指定图片大小无法保证图片的自适应展示 ** | | closeOnClickOutside | 可选属性:boolean，默认为true。点击图片以外的区域关闭imageViewer。如该属性为false，则必须自己实现关闭imageViewer的方法。 |

ImageViewer组件模型

使用注意事项

1. 因pixui在元素布局和尺寸上的特性，如果要使用该组件实现图片全屏居中展示的预期效果，需要将该组件放在所需展示界面的root节点下，以保证该组件能以正确的布局展示内容。

使用示例

示例代码

import { Component } from 'preact'
import { ImageViewer } from 'pixuireactcomponents';
import { Images } from './Images';

export class ImageViewerDemo extends Component<any, {
    isViewerOpen: boolean;
    imageUrl:string;
}> {
    constructor(props) {
        super(props);
        this.state = {
            isViewerOpen: false,
            imageUrl:'',
        };
    }

    onOpenImageViewer (url) {
        console.log('onOpen');
        this.setState({
            isViewerOpen: true,
            imageUrl:url,
        })
    }

    onCloseImageViewer = () => {
        console.log('onClose');
        this.setState({
            isViewerOpen: false,
        })
    }

    render() {
        return (
            <div style={{
                width: '100%',
                height: '100%',
            }}>
                {/* <ImageViewer>应在root节点下才能保证全屏居中展示 */}
                {this.state.isViewerOpen && <ImageViewer
                    src={this.state.imageUrl}
                    onClose={this.onCloseImageViewer}
                    imageAreaStyle={{
                        width: '80%',
                        height: '80%',
                    }}
                />}

                <div style={{
                    backgroundColor: 'rgba(125,0,0,0.8)',
                    display: 'flex',
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'center',
                    width: '50%',
                    height: '50%',
                }}>
                    <img src={Images.bg1}
                        style={{ width: '166px', height: '102.4px' }}
                        onClick={()=>this.onOpenImageViewer(Images.bg1)} />
                                            <img src={Images.bg2}
                        style={{ width: '166px', height: '102.4px' }}
                        onClick={()=>this.onOpenImageViewer(Images.bg2)} />
                </div>
            </div>
        );
    }
}