一款基于react的图片预览组件,特别适合于异步获
A ReactJS image Viewer Component for mobile 一款基于react的图片预览组件,特别适合于异步获取的富文本中的图片,点击图片即可全屏显示,并且带有轮播效果。
demonpm install react-image-viewer-mobile --save
Example
'use strict'; import React from 'react'; import NewsBox from '../NewsBox'; import ImagePreviewer from 'react-image-viewer-mobile' // import ImagePreviewer from '../../../dist/react-image-viewer-mobile.js' class News extends React.Component { render() { return ( <div> <ImagePreviewer async={true} /*图片内容是否异步*/ imageWrapperHeight={300} /*图片容器高度*/ opacity={1} /*背景透明度*/ zIndex={1000} /*图层层级*/ gap={10} /*图片间隙*/ > <NewsBox content={this.props.content}/> /*异步获取的富文本*/ </ImagePreviewer> </div> ); } } export default News
//新闻内容组件 NewsBox
import React from 'react';
class NewsBox extends React.Component {
render() {
return (
<div dangerouslySetInnerHTML={{__html: this.props.content}}>
</div>
);
}
}
export default NewsBox
Running demo locally
The demo can be launched on local machine via webpack-dev-server
. Run the following:
webpack-dev-server --config webpack.dev.config.js --color --progress Props
Property | Description | Type | default | Remarks |
---|---|---|---|---|
async | is images async? | Boolean | false | 图片内容是否异步 |
zIndex | the depth of the layer | Number | 1000 | 图层层级 |
gap | the gap between images | Number | 10 | 图片间隙 |
opacity | the backgroup modal's opacity | Number | 1 | 背景透明度 |
imageWrapperHeight | the height of image wrapper | Number | 300 | 图片容器高度 |
版权声明:
1、该文章(资料)来源于互联网公开信息,我方只是对该内容做点评,所分享的下载地址为原作者公开地址。2、网站不提供资料下载,如需下载请到原作者页面进行下载。