前言
我是歌谣 我有个兄弟 巅峰的时候排名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} 使得下面的分割线隐藏
这样就形成了伪实现了
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了