feat(ImageViewer): support change zoomSpeed

src/BootstrapBlazor.Server/Components/Samples/ImageViewers.razor

@@ -116,7 +116,7 @@
            Name="PreviewList">
     <div class="images img-ph mt-3">
         <div class="images-item">
-            <ImageViewer Url="@WebsiteOption.CurrentValue.GetAssetUrl("images/bird.jpeg")" PreviewList="PreviewList" />
+            <ImageViewer Url="@WebsiteOption.CurrentValue.GetAssetUrl("images/bird.jpeg")" PreviewList="PreviewList" ZoomSpeed="0.5" />
         </div>
     </div>
 </DemoBlock>

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -5914,7 +5914,7 @@
     "ImageViewerErrorTemplateTitle": "Load failed",
     "ImageViewerErrorTemplateIntro": "Can be set up by the <code>Error Template</code> open Error Template function, Url parameter <code>Url</code> unable to load images displayed when the content of the Template",
     "ImageViewerPreviewListTitle": "A larger preview",
-    "ImageViewerPreviewListIntro": "Can be set up by the <code>Preview List</code> opens a larger Preview of the function",
+    "ImageViewerPreviewListIntro": "Can be set up by the <code>Preview List</code> opens a larger Preview of the function,Set <code>ZoomSpeed</code> to control the speed of scrolling and scaling",
     "ImageViewersAttrUrl": "Picture Url",
     "ImageViewersAttrAlt": "Native Alt attribute",
     "ImageViewersAttrShowPlaceHolder": "Whether display placeholder for large images added",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -5914,7 +5914,7 @@
     "ImageViewerErrorTemplateTitle": "加载失败",
     "ImageViewerErrorTemplateIntro": "可通过设置 <code>ErrorTemplate</code> 开启错误模板功能，参数 <code>Url</code> 无法加载图片时显示此模板内容",
     "ImageViewerPreviewListTitle": "大图预览",
-    "ImageViewerPreviewListIntro": "可通过设置 <code>PreviewList</code> 开启预览大图的功能",
+    "ImageViewerPreviewListIntro": "可通过设置 <code>PreviewList</code> 开启预览大图的功能,设置 <code>ZoomSpeed</code> 控制滚动缩放时的速度",
     "ImageViewersAttrUrl": "图片 Url",
     "ImageViewersAttrAlt": "原生 alt 属性",
     "ImageViewersAttrShowPlaceHolder": "是否显示占位符 适用于大图片加载",

src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.cs

@@ -78,6 +78,12 @@ public partial class ImagePreviewer
     [Parameter]
     public string? RotateRightIcon { get; set; }
 
+    /// <summary>
+    /// 获得/设置 预览缩放速度
+    /// </summary>
+    [Parameter]
+    public double ZoomSpeed { get; set; }
+
     [Inject]
     [NotNull]
     private IIconTheme? IconTheme { get; set; }
@@ -126,5 +132,5 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, PreviewList);
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, PreviewList, new { ZoomSpeed });
 }

src/BootstrapBlazor/Components/ImagePreviewer/ImagePreviewer.razor.js

@@ -1,15 +1,15 @@
 import Data from "../../modules/data.js"
 import Viewer from "../../modules/viewer.js"
 
-export function init(id, prevList) {
+export function init(id, prevList, config) {
     const el = document.getElementById(id)
     if (el === null) {
         return
     }
 
     const viewer = {
         el,
-        viewer: Viewer.init(el, prevList)
+        viewer: Viewer.init(el, prevList, config)
     }
     Data.set(id, viewer)
 }

src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor

@@ -14,7 +14,7 @@
 
     @if (ShowPreviewList)
     {
-        <ImagePreviewer Id="@PreviewerId" ZIndex="@ZIndex" PreviewList="PreviewList" />
+        <ImagePreviewer Id="@PreviewerId" ZIndex="@ZIndex" ZoomSpeed="@ZoomSpeed" PreviewList="PreviewList" />
     }
 </div>
 

src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.cs

@@ -118,6 +118,12 @@ public partial class ImageViewer
     [Parameter]
     public bool IsIntersectionObserver { get; set; }
 
+    /// <summary>
+    /// 获得/设置 预览缩放速度
+    /// </summary>
+    [Parameter]
+    public double ZoomSpeed { get; set; }
+
     [Inject]
     [NotNull]
     private IIconTheme? IconTheme { get; set; }

src/BootstrapBlazor/wwwroot/modules/viewer.js

@@ -145,16 +145,24 @@ export default {
         // 右旋转功能
         EventHandler.on(viewer.rotateRight, 'click', () => viewer.processImage(null, rotate => rotate + 90))
 
+
+        // 配置缩放速度因子（值越大缩放越快）
+        const BASE_SPEED = viewer.zoomSpeed ? viewer.zoomSpeed : 0.015; // 基础速度
+
         const handlerWheel = e => {
-            e.preventDefault()
-            const wheel = e.wheelDelta || -e.detail
-            const delta = Math.max(-1, Math.min(1, wheel))
+            e.preventDefault();
+            const wheel = e.wheelDelta || -e.detail;
+            const delta = Math.max(-1, Math.min(1, wheel));
+
+            // 动态计算速度（按住Shift时降速）
+            const zoomStep = e.shiftKey ? BASE_SPEED * 0.2 : BASE_SPEED;
+
             if (delta > 0) {
                 // 放大
-                viewer.processImage(scale => scale + 0.015)
+                viewer.processImage(scale => scale + zoomStep);
             } else {
-                // 缩小
-                viewer.processImage(scale => Math.max(0.195, scale - 0.015))
+                // 缩小（保持最小缩放比例0.195）
+                viewer.processImage(scale => Math.max(0.195, scale - zoomStep));
             }
         }
         // 鼠标放大缩小