import React,{Component} from 'react'; import {Icon,Modal} from 'antd'; import './index.less'; import $ from "jquery"; class ImgList extends Component{ constructor(props) { super(props); this.state={ seeMore: false, previewVisible: false, previewImage: '' } this.handleCancel = this.handleCancel.bind(this); } componentDidMount() { $(".fileItem").bind("mouseover",function (){ $(this).children().first().css({ "background": "rgba(0,0,0,.6)", "display":"flex" }); }); $(".fileItem").bind("mouseout",function (){ $(this).children().first().css("display","none"); }); } handleCancel() { this.setState({ previewVisible:false, previewImage: '', }) } render() { return ( <div> <div className='ImgList'> { this.props.fileList && this.props.fileList.slice(0,10).map((value,index)=>( <div key={index} className='fileItem' style={{ width: this.props.ItemWidth ? this.props.ItemWidth : '100px', height: this.props.ItemWidth ? this.props.ItemWidth : '100px', }}> <div className='coveringLayer'> <Icon type="eye-o" onClick={()=>{ this.setState({ previewVisible: true, previewImage: value.url }) }}/> </div> <img src={value.url} className='imgFile'/> </div> )) } { this.props.fileList && this.props.fileList.slice(10).map((value,index)=>( <div key={index} className='fileItem' style={{ width: this.props.ItemWidth ? this.props.ItemWidth : '100px', height: this.props.ItemWidth ? this.props.ItemWidth : '100px', display: this.state.seeMore ? 'block' : 'none', }}> <div className='coveringLayer'> <Icon type="eye-o" onClick={()=>{ this.setState({ previewVisible: true, previewImage: value.url || value.thumbUrl }) }}/> </div> <img src={value.url} className='imgFile'/> </div> )) } {/*{console.log(this.props.fileList,'图片')}*/} </div> {this.props.fileList && this.props.fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}> {this.state.seeMore ? '收起' : '查看更多'} </div> : <div/>} <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}> <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} /> </Modal> </div> ) } } export default ImgList;