如何实现一个图片的伪预览效果

简介: 如何实现一个图片的伪预览效果

## 前言


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


需求

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


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


解决方案

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


<Button type="link" onClick={() =>this.handleRever(row.qrUrl)}>查看</Button>
```
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}/>


```




总结

要点1 点击事件


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


这样就形成了伪实现了





相关文章
|
6月前
随机背景个人引导页源码
随机背景个人引导页源码
90 0
随机背景个人引导页源码
|
5月前
|
Linux iOS开发 MacOS
【随手记】maplotlib.use函数设置图像的呈现方式
【随手记】maplotlib.use函数设置图像的呈现方式
56 0
|
5月前
|
存储 JSON API
随机图片API源码(附新图片数据
含1000+HTTP图片,存储于企业空间,速度媲美新浪。计划扩展更多类别。基础调用:`http:///dm`,JSON格式:`http:///dm?return=json`。返回示例: ```json {
117 0
|
6月前
|
数据安全/隐私保护 Python
python 图片打水印 透明图片合并
python 图片打水印 透明图片合并
50 1
|
6月前
|
存储 JavaScript 小程序
高德地图实现点聚合功能的详细步骤加截取地图图片 (附源码)
高德地图实现点聚合功能的详细步骤加截取地图图片 (附源码)
124 0
|
6月前
|
移动开发 前端开发 iOS开发
H5页面布局之图片液态化(自适应)处理简述
H5页面布局之图片液态化(自适应)处理简述
53 0
H5页面布局之图片液态化(自适应)处理简述
|
前端开发 开发者
鼠标可控的表格滑动(左右)demo效果示例(整理)
鼠标可控的表格滑动(左右)demo效果示例(整理)
|
存储 监控 机器人
JavaRobot如何实现屏幕截图
屏幕截图是日常开发中常见且重要的功能之一,而JavaRobot提供了一种简便且高效的方式来实现屏幕截图。本文将介绍JavaRobot如何实现屏幕截图的步骤和方法。
272 0
|
缓存 iOS开发 MacOS
万能动态滤镜GIF框架想不想要的?
Wintersweet是一款快速让控件播放GIF和添加过滤器的框架。
万能动态滤镜GIF框架想不想要的?