import React, { useState } from 'react'
import * as ReactDOM from 'react-dom';
import { Modal } from 'antd'
const Index = props => {
const [visible, setVisible] = useState(true)
const { url, cancelCallback } = props
const handleCancel = () => {
setVisible(false)
cancelCallback && cancelCallback()
}
return (
<Modal width="700px" visible={visible} footer={null} onCancel={handleCancel} centered>
<div style={{ maxHeight: '80vh', overflow: 'auto' }}>
<img src={url} style={{ width: '100%' }} alt=""/>
</div>
<style>
{`
.ant-modal-close-x {
width: 35px;
line-height: 35px;
}
`}
</style>
</Modal>
)
}
const PreviewImages = (props = {}) => {
const { url, callback } = props
const div = document.createElement('div')
document.body.appendChild(div)
const cancelCallback = () => {
const result = ReactDOM.unmountComponentAtNode(div)
if (result && div.parentNode) {
div.parentNode.removeChild(div)
}
callback && callback()
}
ReactDOM.render(
<Index
url={url}
cancelCallback={cancelCallback}
/>,
div
)
}
export default PreviewImages;
React antd 封装一个简单的图片预览组件
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 实现效果图 功能预览 【less】上传文件的input框样式的改造 获取图片列表 点击上传图片 + 转换成base...
- Picture uploader - Vue2.X 将之前项目中使用到的一个文件上传组件提取出来，单独做一个图片上...
- 在React框架中使用antd组件里面upload组件上传图片到阿里云。antd有官方文档，但是有点复杂了，实际上...
