1.0.12 • Published 6 years ago

big-img v1.0.12

Weekly downloads
-
License
ISC
Repository
-
Last release
6 years ago

##datepicker

des 点击小图看大图

##code block

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import style from './BigImg.css';

/**
 * create by liheng at 2016.12.12
 * <BigImg />
 * imgArr=[{
 *      path:"",
        id:""
    }]
 * 弹框播放图片资源
 */
class BigImg extends Component{
    constructor(props){
        super(props);
        this.state={
            imgArr:props.imgArr||[],
            currentIndex:props.currentIndex||0
        }
    }
    render() {
        let currentPath = this.state.imgArr[this.state.currentIndex]['path'];

        return (
            <div className={style["bigimg__box"]} ref="bigimg">
                <div className={style["bigimg__shade"]} onClick={e=>this.unMount()}></div>
                <div className={style["bigimg__content"]}>

                    <img src={currentPath} alt="" className={style['show__img']}/>
                    {/*上下一页*/}
                    <span className={style["pre__img"]} onClick={e=>this.setCurrentImg('pre')}></span>
                    <span className={style["next__img"]} onClick={e=>this.setCurrentImg('next')}></span>
                </div>
            </div>
        );
    }
    setCurrentImg(type){
        let {currentIndex,imgArr=[]} = this.state;
        let maxLen = imgArr.length,index='';

        switch(type){
            case 'pre':
                index = currentIndex - 1 < 0 ? currentIndex : currentIndex - 1;
                break;
            case 'next':
                index = currentIndex + 1 == maxLen? currentIndex : currentIndex + 1;
                break     
            default:
                break;
        }

        this.setState({
            currentIndex:index
        })
    }
    unMount(){
        let mountNode = ReactDOM.findDOMNode(this.refs.bigimg);

        mountNode.parentNode.removeChild(mountNode);

    }

}

export  default function BigImg(imgArr=[],index=0){
    let imgRoot = document.createElement('div');
    document.body.appendChild(imgRoot);

    ReactDOM.render(<BigImg imgArr={imgArr} currentIndex={index}/>,imgRoot);
}