1.0.12 • Published 6 years ago
big-img v1.0.12
##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);
}
1.0.12
6 years ago