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

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

## 前言


我是歌谣 我有个兄弟 巅峰的时候排名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} 使得下面的分割线隐藏


这样就形成了伪实现了





相关文章
|
监控 Linux 数据处理
探索Linux中的`mountpoint`命令
`mountpoint`命令在Linux中用于检测目录是否为挂载点,关键在于检查`/etc/mtab`或`/proc/mounts`。简单易用,高效且无额外依赖。例如,用`mountpoint -q /mnt/data`判断挂载点,并结合`find`列出所有挂载点。在脚本中注意检查返回值,可能需`sudo`提升权限。可与其他命令组合以扩展功能。
382 10
|
10月前
|
Java
课时15:Java运算符(基础数学运算符)
课时15介绍了Java中的基础数学运算符,涵盖加、减、乘、除及自增自减运算。强调了运算符的优先级和使用括号的重要性,并通过范例展示了四则运算与自增自减的具体应用。提醒编写代码时应保持简洁,避免复杂的表达式,确保代码易读性和可维护性。
154 7
|
存储 安全 搜索推荐
hyperf-throttle-requests,一个超牛的 PHP 限流神器
`hyperf-throttle-requests` 是专为 Hyperf 框架设计的请求频率限流库,适用于分布式系统和微服务架构,能有效防止恶意攻击和流量高峰对后端服务的影响。通过限制用户在一定时间内的请求次数,确保服务的稳定性和可用性。该库支持注解、助手函数及直接调用三种使用方式,并提供了灵活的配置选项,如存储驱动、最大请求次数等。最新版已兼容 Hyperf 3.1 版本,安装简便,配置灵活,是保护后端服务的理想选择。
239 3
|
Cloud Native 持续交付 Docker
云原生技术入门与实践:Docker容器化部署示例
【9月更文挑战第25天】在数字化转型的浪潮下,云原生技术成为推动企业创新的重要力量。本文旨在通过浅显易懂的语言,为初学者揭示云原生技术的核心概念及其应用价值。我们将以Docker容器为例,逐步引导读者了解如何将应用程序容器化,并在云端高效运行。这不仅是对技术趋势的跟随,更是对资源利用和开发效率提升的探索。
215 4
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的智慧社区电子商务系统附带文章和源代码设计说明文档ppt
基于ssm+vue.js+uniapp小程序的智慧社区电子商务系统附带文章和源代码设计说明文档ppt
117 1
|
运维 Linux
CentOS系统openssh-9,你会的还只有初级Linux运维工程师的技术吗
CentOS系统openssh-9,你会的还只有初级Linux运维工程师的技术吗
|
存储 关系型数据库 MySQL
docker安装mysql8忽略大小写
docker安装mysql8忽略大小写
1916 0
|
关系型数据库 MySQL 开发工具
在wsl中部署.netcore应用
在wsl中部署.netcore应用
|
Java 数据安全/隐私保护 微服务
gRPC请求超时和异常处理
gRPC请求超时和异常处理