结合antd的Modal弹窗做可放大缩小,拖拽的图片放大查看

import React, { useRef } from "react"
import { Modal } from "antd"
// import { observer } from "mobx-react" //引入mobx,为了下一行
// import $state from "state" //引入state主要方便管理多个弹出框时,改变不同弹窗的打开标识

const BigPicture = props => {

    const zoomImg = useRef(null)

    const handleImgZoom = e => {
        const { clientWidth, clientHeight, style, height, width } = zoomImg.current
        const value = height / width
        const num = 100
        const bool = height > width ? clientWidth < 2000 : clientHeight < 1500
        if (e.nativeEvent.deltaY <= 0 && bool) {
            style.maxWidth = "none"
            style.maxHeight = "none"
            style.width = width + num + "px"
            style.height = height + (num * value) + "px"
            style.left = style.left - 1 % +"px"
            style.top = style.top - 1 % +"px"
        } else if (e.nativeEvent.deltaY > 0) {
            if (width > 200 && height > 100) {
                style.width = width - num + "px"
                style.height = height - (num * value) + "px"
                style.left = style.left + 1 % + "px"
                style.top = style.top + 1 % + "px"
            }
        }
    }

    const prenentDefault = e => {
        e.prenentDefault()
    }

    const handleDrag = e => {
        const { style, offsetLeft, offsetTop } = zoomImg.current
        //在jsx格式中需要用e.persist(),此方法会从池中移除合成时间,否则clientX会是null
        const x = e.clientX - offsetLeft
        const y = e.clientY - offsetTop
        zoomImg.current.onmousemove = function (e) {
            style.left = e.clientX - x + "px"
            style.top = e.clientY - y + "px"
        }
        zoomImg.current.onmouseup = function () {
            zoomImg.current.onmousemove = null
        }
    }

    const closePicModal = e => {
        e.stopPropagation()
        $state[props.openPicFlag] = false
    }

    return (
        <Modal
            visible={$state[props.openPicFlag]}
            onCancel={closePicModal}
        >
            <div className='close-botton' onClick={closePicModal}>
                <i />
            </div>
            <img
                className='zoomImg'
                alt=''
                src={props.url}
                onWheel={handleImgZoom} //滚轮缩放
                onDragStart={prenentDefault}
                onMouseDown={e => { e.persist(); handleDrag(e) }}
                ref={zoomImg}
            />
        </Modal>
    )
}

export default BigPicture