//引入
import {Modal} from "antd-mobile";
//state
this.state = {
isShow:false,
imgSrc:""
};
//fun
onClose =() => {
this.setState({
imgShow: false
});
}
imgShow=(e)=>{
if(e.target.nodeName==="IMG"){ //判断img 节点
this.setState({
imgShow:true,
imgSrc:e.target.src
})
}
}
<Modal
className="imgCon"
visible={this.state.imgShow}
transparent
maskClosable={true}
onClose={this.onClose}
title="查看图片"
footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose();} }]}
wrapProps={{ onTouchStart: this.onWrapTouchStart }}
>
<img style={{width:'100%'}} src={this.state.imgSrc} alt="" />
</Modal>
<img onClick={this.imgShow} src="test.png" /> //要点击放大的图片
效果:
QQ截图20191017114123.png
QQ截图20191017114130.png
网友评论