react 放大缩小插件

你可以使用react-image-magnifiers插件来实现图片的放大缩小功能。该插件支持多种缩放模式，包括放大镜、滑块和双击缩放等。以下是一个简单的示例代码：

import React from 'react';
import { Magnifier, MOUSE_ACTIVATION, TOUCH_ACTIVATION } from 'react-image-magnifiers';

const ImageMagnifier = ({ imageUrl }) => {
  return (
    <Magnifier
      imageSrc={imageUrl}
      mouseActivation={MOUSE_ACTIVATION.CLICK} // 指定鼠标操作触发放大镜
      touchActivation={TOUCH_ACTIVATION.TAP} // 指定触摸操作触发放大镜
      dragToMove={false} // 禁用拖动图片
      zoomLevel={2} // 设置默认缩放级别为 2 倍
      zoomStyle={{ zIndex: 9999 }} // 设置放大镜样式
    />
  );
};

export default ImageMagnifier;

你可以根据需要调整不同的选项来满足你的需求。更多细节和示例请参考官方文档：https://github.com/adamrisberg/react-image-magnifiers