1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- 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;
|