feat(ImageViewer): support display by index (#2411)

* make ImageViewer surport view at index(js file)

make ImageViewer surport view at index(js file)

Signed-off-by: zhouqi <[email protected]>

* make ImageViewer surport view at index(cs file)

make ImageViewer surport view at index(cs file)

Signed-off-by: zhouqi <[email protected]>

---------

Signed-off-by: zhouqi <[email protected]>

Author: zhouqime

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

@@ -85,6 +85,12 @@ public partial class ImageViewer
     /// </summary>
     [Parameter]
     public List<string>? PreviewList { get; set; }
+    
+    /// <summary>
+    /// 获得/设置 预览大图当前链接集合点开的索引 默认为 0
+    /// </summary>
+    [Parameter]
+    public int PreviewIndex { get; set; } = 0;
 
     /// <summary>
     /// 获得/设置 图片加载失败时回调方法
@@ -138,15 +144,15 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         if (!firstRender)
         {
-            await InvokeVoidAsync("update", Id, PreviewList);
+            await InvokeVoidAsync("update", Id, PreviewList, PreviewIndex);
         }
     }
 
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
     /// <returns></returns>
-    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Url, PreviewList);
+    protected override Task InvokeInitAsync() => InvokeVoidAsync("init", Id, Url, PreviewList, PreviewIndex);
 
     private RenderFragment RenderChildContent() => builder =>
     {

src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor.js

@@ -1,20 +1,20 @@
 import Data from "../../modules/data.js?v=$version"
 import EventHandler from "../../modules/event-handler.js?v=$version"
 
-const setListeners = viewer => {
+const setListeners = (viewer, index) => {
     if (viewer.prevList && viewer.prevList.length > 0) {
         EventHandler.on(viewer.img, 'click', () => {
             if (!viewer.previewer) {
                 viewer.previewer = Data.get(viewer.previewerId)
             }
             if (viewer.previewer) {
-                viewer.previewer.viewer.show()
+                viewer.previewer.viewer.show(index)
             }
         })
     }
 }
 
-export function init(id, url, preList) {
+export function init(id, url, preList, index) {
     const el = document.getElementById(id)
     if (el === null) {
         return
@@ -35,17 +35,17 @@ export function init(id, url, preList) {
         viewer.img.setAttribute('src', url)
     }
 
-    setListeners(viewer)
+    setListeners(viewer, index)
 }
 
-export function update(id, prevList) {
+export function update(id, prevList, index) {
     const viewer = Data.get(id)
     if (viewer.img) {
         EventHandler.off(viewer.img, 'click')
     }
 
     viewer.prevList = prevList
-    setListeners(viewer)
+    setListeners(viewer,index)
 }
 
 export function dispose(id) {