1.0.5 • Published 5 years ago
react-preview-image v1.0.5
react-preview-image
A light-weight React preview-image component with extremely easy API(只适用于移动端项目). Online Demo, welcomecode review
Installation
npm install react-preview-image --save
Usage
import img1 from './static/images/11.jpg';
import img2 from './static/images/12.jpg';
import img3 from './static/images/13.jpg';
import img4 from './static/images/14.jpg';
import img5 from './static/images/15.jpg';
import PreviewImage from './PreviewImage';
const SOURCE = [img1, img2, img3, img4, img5];
const indicatorStyle = {
bottom: '50px',
};
export default class App extends PureComponent {
constructor() {
super();
this.state = {
// 是否展示 PreviewImage
visible: false,
// 点开后展示的是第几张图片
// 0 表示第一张,默认第一张
index: 0,
};
}
handleTriggle = () => this.setState(prevState => ({ visible: !prevState.visible }))
render() {
const { visible, index } = this.state;
return (
<div className="container">
<div className="button" onClick={this.handleTriggle}>展示</div>
<PreviewImage
source={SOURCE}
index={index}
visible={visible}
indicatorStyle={indicatorStyle}
onHide={this.handleTriggle}
/>
</div>
);
}
}
props
param | detail | type | default |
---|---|---|---|
source | store a collection of image src attributes | array | [] |
visible | whether to display components | bool | false |
visibleIndicator | whether to display the indicator | bool | false |
index | the subscript of the currently displayed image | number | 0 |
onHide | how to close a component | function | |
indicatorStyle | add a style name to the indicator | object | { top: '50px' } |