index.js 3.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. import React,{Component} from 'react';
  2. import {Icon,Modal} from 'antd';
  3. import './index.less';
  4. import $ from "jquery";
  5. class ImgList extends Component{
  6. constructor(props) {
  7. super(props);
  8. this.state={
  9. seeMore: false,
  10. previewVisible: false,
  11. previewImage: ''
  12. }
  13. this.handleCancel = this.handleCancel.bind(this);
  14. }
  15. componentDidMount() {
  16. $(".fileItem").bind("mouseover",function (){
  17. $(this).children().first().css({
  18. "background": "rgba(0,0,0,.6)",
  19. "display":"flex"
  20. });
  21. });
  22. $(".fileItem").bind("mouseout",function (){
  23. $(this).children().first().css("display","none");
  24. });
  25. }
  26. handleCancel() {
  27. this.setState({
  28. previewVisible:false,
  29. previewImage: '',
  30. })
  31. }
  32. render() {
  33. return (
  34. <div>
  35. <div className='ImgList'>
  36. {
  37. this.props.fileList && this.props.fileList.slice(0,10).map((value,index)=>(
  38. <div key={index} className='fileItem' style={{
  39. width: this.props.ItemWidth ? this.props.ItemWidth : '100px',
  40. height: this.props.ItemWidth ? this.props.ItemWidth : '100px',
  41. }}>
  42. <div className='coveringLayer'>
  43. <Icon type="eye-o" onClick={()=>{
  44. this.setState({
  45. previewVisible: true,
  46. previewImage: value.url
  47. })
  48. }}/>
  49. </div>
  50. <img src={value.url} className='imgFile'/>
  51. </div>
  52. ))
  53. }
  54. {
  55. this.props.fileList && this.props.fileList.slice(10).map((value,index)=>(
  56. <div key={index} className='fileItem' style={{
  57. width: this.props.ItemWidth ? this.props.ItemWidth : '100px',
  58. height: this.props.ItemWidth ? this.props.ItemWidth : '100px',
  59. display: this.state.seeMore ? 'block' : 'none',
  60. }}>
  61. <div className='coveringLayer'>
  62. <Icon type="eye-o" onClick={()=>{
  63. this.setState({
  64. previewVisible: true,
  65. previewImage: value.url || value.thumbUrl
  66. })
  67. }}/>
  68. </div>
  69. <img src={value.url} className='imgFile'/>
  70. </div>
  71. ))
  72. }
  73. {console.log(this.props.fileList,'图片')}
  74. </div>
  75. {this.props.fileList && this.props.fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
  76. {this.state.seeMore ? '收起' : '查看更多'}
  77. </div> : <div/>}
  78. <Modal visible={this.state.previewVisible} footer={null} onCancel={this.handleCancel}>
  79. <img alt="example" style={{ width: '100%' }} src={this.state.previewImage} />
  80. </Modal>
  81. </div>
  82. )
  83. }
  84. }
  85. export default ImgList;