#私藏项目实操分享# 【React工作记录六】如何实现一个图片的伪预览效果

2023-10-28 12:09:34

前言

我是歌谣我有个兄弟巅峰的时候排名c站总榜19 叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷

需求

今天我们公司领导找我说这边有个需求需要你做一下就是一个ant design table里面有个图片

点击的时候给个预览效果为什么这边叫做伪预览呢因为其实就是用 ant design 的model实现完成的

解决方案

我们来看一下代码的实现过程

<Button type="link" 
onClick={() =>this.handleRever(row.qrUrl)}>查看</Button>

<Modal
        
        style={{textAlign: 'center'}}
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={null}
        >
        <img style={{width: '200px', height: '200px',textAlign: 'center'}} 
src={qrUrl}/>
        </Modal>

总结

要点1 点击事件

要点2 foot={null} 使得下面的分割线隐藏

这样就形成了伪实现了