12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061 |
- import React,{Component} from 'react';
- import {Upload} from 'antd';
- import './index.less';
- import Viewer from 'viewerjs';
- import 'viewerjs/dist/viewer.css'
- //const url1 = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1601012352754&di=d33308119328f5ed987bd90031f98cfa&imgtype=0&src=http%3A%2F%2Fa2.att.hudong.com%2F27%2F81%2F01200000194677136358818023076.jpg';
- //const url2 = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1601001245&di=60b5e1a42beb791524b46d7e3677f1f4&src=http://a2.att.hudong.com/13/86/01300001285722131043860050752.jpg';
- class ImgList extends Component{
- constructor(props) {
- super(props);
- this.state={
- seeMore: false,
- fileList: props.fileList.map((v,i)=>{
- v.index = i;
- // v.url = i%2 ? url1 : url2;
- return v
- }) || [],
- }
- }
- componentDidMount() {
- this.gallery = new Viewer(document.getElementById('images'));
- }
- render() {
- const {fileList} = this.state;
- return (
- <div className='ImgListComponent'>
- <div className='ImgList'>
- <Upload
- className="demandDetailShow-upload"
- listType="picture-card"
- fileList={
- this.state.seeMore?
- fileList :
- fileList.slice(0,10)
- }
- onPreview={(file) => {
- this.gallery.view(file.index).show();
- }}
- />
- </div>
- {fileList.length > 10 ? <div className='seeMore' onClick={()=>{this.setState({seeMore:!this.state.seeMore})}}>
- {this.state.seeMore ? '收起' : '查看更多'}
- </div> : <div/>}
- <ul id="images" style={{display:'none',zIndex:-1,}}>
- {
- fileList.map((value,index)=>(
- <li key={index}>
- <img src={value.url || value.thumbUrl}/>
- </li>
- ))
- }
- </ul>
- </div>
- )
- }
- }
- export default ImgList;
|