#yyds干货盘点 【React工作记录六】如何实现一个图片的伪预览效果

简介: #yyds干货盘点 【React工作记录六】如何实现一个图片的伪预览效果

需求

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


这样就形成了伪实现了


相关文章
|
7月前
|
前端开发
React 仿淘宝图片放大镜功能
React 仿淘宝图片放大镜功能
131 0
|
6月前
|
前端开发
react怎么做图片报错处理
react怎么做图片报错处理
73 1
|
7月前
|
前端开发
构建一个简单的React图片画廊应用
构建一个简单的React图片画廊应用
145 0
|
7月前
|
前端开发 JavaScript
react中img引入本地图片的方式
react中img引入本地图片的方式
277 0
|
前端开发 JavaScript
react-qr-code的第三方库来将URL转换成二维码图片
在React中,你可以使用一个叫做react-qr-code的第三方库来将URL转换成二维码图片并保存。首先,你需要安装这个库: ``` npm install react-qr-code ``` 然后,在你的组件中引入react-qr-code: ``` import QRCode from 'react-qr-code'; ``` 接着,在render方法中使用QRCode组件,将URL作为一个属性传递进去: ``` render() { const url = 'https://www.example.com'; return ( <div> <Q
823 0
|
7月前
|
前端开发
React 拖动图片
React 拖动图片
|
7月前
|
前端开发
react 实现图片懒加载
react 实现图片懒加载
152 0
|
7月前
|
前端开发
20行代码,封装一个 React 图片懒加载组件
20行代码,封装一个 React 图片懒加载组件
|
前端开发
React基础语法03-引入本地图片和服务器图片的方法
React基础语法03-引入本地图片和服务器图片的方法
123 0
|
前端开发
React/Umi中实现移动端滑动图片验证功能
React/Umi中实现移动端滑动图片验证功能
246 0