mirror of
https://github.com/infeng/react-viewer.git
synced 2025-12-08 17:36:40 +00:00
feature: add attribute prop
This commit is contained in:
parent
491ce6dbdc
commit
5702be360a
@ -66,6 +66,7 @@ class App extends React.Component<any, any> {
|
||||
onClose={() => { this.setState({ visible: false }); } }
|
||||
images={images}
|
||||
activeIndex={this.state.activeIndex}
|
||||
attribute={false}
|
||||
/>
|
||||
</div>
|
||||
<div className="footer">
|
||||
|
||||
@ -35,6 +35,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
|
||||
activeIndex: 0,
|
||||
zIndex: 1000,
|
||||
drag: true,
|
||||
attribute: true,
|
||||
};
|
||||
|
||||
private prefixCls: string;
|
||||
@ -470,6 +471,7 @@ export default class ViewerCore extends React.Component<ViewerProps, ViewerCoreS
|
||||
alt={activeImg.alt}
|
||||
width={this.state.imageWidth}
|
||||
height={this.state.imageHeight}
|
||||
attribute={this.props.attribute}
|
||||
/>
|
||||
<ViewerNav
|
||||
prefixCls={this.prefixCls}
|
||||
|
||||
@ -18,6 +18,8 @@ interface ViewerProps {
|
||||
container?: HTMLElement;
|
||||
/** 图片是否可拖动 */
|
||||
drag?: boolean;
|
||||
/** 是否显示图片属性 */
|
||||
attribute?: boolean;
|
||||
}
|
||||
|
||||
export default ViewerProps;
|
||||
|
||||
@ -7,6 +7,7 @@ export interface ViewerToolbarProps {
|
||||
alt: string;
|
||||
width: number;
|
||||
height: number;
|
||||
attribute: boolean;
|
||||
}
|
||||
|
||||
export default class ViewerToolbar extends React.Component<ViewerToolbarProps, any> {
|
||||
@ -20,11 +21,14 @@ export default class ViewerToolbar extends React.Component<ViewerToolbarProps, a
|
||||
}
|
||||
|
||||
render() {
|
||||
let attributeNode = this.props.attribute ? (
|
||||
<p className={`${this.props.prefixCls}-attribute`}>
|
||||
{`${this.props.alt}(${this.props.width} x ${this.props.height})`}
|
||||
</p>
|
||||
) : null;
|
||||
return (
|
||||
<div>
|
||||
<p className={`${this.props.prefixCls}-attribute`}>
|
||||
{`${this.props.alt}(${this.props.width} x ${this.props.height})`}
|
||||
</p>
|
||||
{attributeNode}
|
||||
<ul className={`${this.props.prefixCls}-toolbar`}>
|
||||
<li className={`${this.props.prefixCls}-btn`} onClick={() => {this.handleAction(ActionType.zoomIn);}}>
|
||||
<Icon type={ActionType.zoomIn}/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user