feat: 添加enableMouseZoom属性，可选择是否启用鼠标缩放。#117

Author: big-camel

apps/example/pages/docs/api.en-US.mdx

@@ -27,6 +27,7 @@ title: API
 | loadingElement     | Custom loading                                                                                      | JSX\.Element                                                               |
 | brokenElement      | Custom loading failed rendering                                                                     | JSX\.Element \| \(\(photoProps: BrokenElementParams\) => JSX\.Element\) |
 | portalContainer    | Custom portal target (e.g. for usage in web components)                                             | HTMLElement                                                                | document.body                            |
+| enableMouseWheel   | Whether to enable mouse wheel zoom                                                                  | boolean                                                                    | true                                     |
 
 ## PhotoView
 

apps/example/pages/docs/api.zh-CN.mdx

@@ -27,6 +27,7 @@ title: API
 | loadingElement     | 自定义 loading                                                | JSX\.Element                                                               |
 | brokenElement      | 自定义加载失败渲染                                            | JSX\.Element \| \(\(photoProps: BrokenElementParams\) => JSX\.Element\) |
 | portalContainer    |                                                               | HTMLElement                                                                | document.body                            |
+| enableMouseZoom    | 是否启用鼠标缩放                                              | boolean                                                                    | true                                     |
 
 ## PhotoView
 

packages/react-photo-view/src/PhotoBox.tsx

@@ -64,6 +64,8 @@ export interface PhotoBoxProps {
   expose: (state: ExposedProperties) => void
   // 是否在当前操作中
   isActive: boolean
+  // 是否开启鼠标缩放
+  enableMouseZoom?: boolean
 }
 
 const initialState = {
@@ -146,7 +148,7 @@ export default function PhotoBox({
   style,
   loadingElement,
   brokenElement,
-
+  enableMouseZoom = true,
   onPhotoTap,
   onMaskTap,
   onReachMove,
@@ -477,7 +479,7 @@ export default function PhotoBox({
   }
 
   function handleWheel(e: React.WheelEvent) {
-    if (!reach) {
+    if (!reach && enableMouseZoom) {
       // 限制最大倍数和最小倍数
       const delta = isDragMode ? e.deltaY / 100 / 16 : e.deltaY / 100 / 2
       const toScale = limitScale(scale - delta, isDragMode, naturalWidth / width)

packages/react-photo-view/src/PhotoSlider.tsx

@@ -138,6 +138,7 @@ export default function PhotoSlider(props: IPhotoSliderProps) {
     onClose,
     afterClose,
     portalContainer,
+    enableMouseZoom = true,
   } = props
 
   const isDragMode = useMemo(() => {
@@ -492,6 +493,7 @@ export default function PhotoSlider(props: IPhotoSliderProps) {
             onPhotoResize={handleResize}
             isActive={(currentImage && currentImage.key) === item.key}
             expose={updateState}
+            enableMouseZoom={enableMouseZoom}
           />
         )
       })}

packages/react-photo-view/src/types.ts

@@ -108,6 +108,10 @@ export interface PhotoProviderBase {
    * @defaultValue document.body
    */
   portalContainer?: HTMLElement
+  /**
+   * 是否开启鼠标缩放
+   */
+  enableMouseZoom?: boolean
 }
 
 export type PhotoRenderParams = {