美文网首页
react 点击图片放大(利用antd-mobile里的Moda

react 点击图片放大(利用antd-mobile里的Moda

作者: lovelydong | 来源:发表于2019-10-17 11:42 被阅读0次
//引入
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

相关文章

网友评论

      本文标题:react 点击图片放大(利用antd-mobile里的Moda

      本文链接:https://www.haomeiwen.com/subject/exymmctx.html