需求
今天我们公司领导找我 说这边有个需求需要你做一下 就是一个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} 使得下面的分割线隐藏
这样就形成了伪实现了