美文网首页
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