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 (
{ this.props.fileList && this.props.fileList.slice(0,10).map((value,index)=>(
{ this.setState({ previewVisible: true, previewImage: value.url }) }}/>
)) } { this.props.fileList && this.props.fileList.slice(10).map((value,index)=>(
{ this.setState({ previewVisible: true, previewImage: value.url || value.thumbUrl }) }}/>
)) } {console.log(this.props.fileList,'图片')}
{this.props.fileList && this.props.fileList.length > 10 ?
{this.setState({seeMore:!this.state.seeMore})}}> {this.state.seeMore ? '收起' : '查看更多'}
:
} example
) } } export default ImgList;