imgpreview-react
v1.0.0
Published
图片预览与查看器,自动适应移动端,只需提供图片地址数组即可,自动计算图片宽高,自适应显示
Downloads
6
Readme
React ImagePreview
图片预览与查看器,自动适应移动端,只需提供图片地址数组即可,自动计算图片宽高,自适应显示
install
npm install imgpreview-react -S
example
import React from "react"
import ImagePreview from "imgpreview-react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
}
onClose = () => {
this.setState({
visible: false
});
};
render() {
const imgs = [
"./1.jpg",
"./2.jpg",
"./3.jpg",
"./4.jpg",
];
return (
<div>
<ImagePreview
imgs={imgs}
visible={this.state.visible}
onClose={this.onClose}
width={1000}
height={500}
/>
</div>
);
}
}
api
| 参数 | 说明 | 类型 | 默认值 | 是否必须 | | ------------- | -------------------- | -------- | --------- | -------- | | imgs | 图片预览地址数组 | array | undefined | 是 | | cIndex | 当前预览的图片下标 | number | 0 | 否 | | width | 图片预览器的宽度 | number | 800 | 否 | | height | 图片预览器的高度 | number | 500 | 否 | | visible | 图片预览器是否显示 | bool | undefined | 是 | | onClose | 图片预览器关闭时回调 | function | undefined | 否 | | showClose | 是否显示关闭按钮 | bool | true | 否 | | showThumbnail | 是否显示底部缩略图 | bool | true | 否 |