Skip to content

Commit dbeda71

Browse files
ArgoZhangArgoZhang
committed
!3580 feat(#I63Y3Y): support image preview on CardUpload component
* test: 更新单元测试 * chore: bump version 7.1.0 * feat: 增加图片预览功能 * chore: 更新脚本 * refactor: 动态调整 PreviewList 参数通知 js * refactor: 更新图片预览 * feat: ImageViewer 内部使用 ImagePreviewer 组件 * refactor: 更改组件名 * refactor: 更新脚本剥离出 image-previewer 脚本
1 parent 13de266 commit dbeda71

File tree

15 files changed

+431
-371
lines changed

15 files changed

+431
-371
lines changed

‎src/BootstrapBlazor/BootstrapBlazor.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<Project Sdk="Microsoft.NET.Sdk.Razor">
22

33
<PropertyGroup>
4-
<Version>7.0.10</Version>
4+
<Version>7.1.0</Version>
55
</PropertyGroup>
66

77
<ItemGroup Condition="'$(TargetFramework)' == 'net5.0'">

src/BootstrapBlazor/Components/ImageViewer/ImagePreview.css renamed to src/BootstrapBlazor/Components/ImageViewer/ImagePreviewer.css

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
1-
.bb-viewer-wrapper {
2-
display: none;
1+
.is-img-preview {
2+
overflow: hidden;
3+
}
4+
5+
.bb-previewer {
36
position: fixed;
47
top: 0;
58
right: 0;
69
bottom: 0;
710
left: 0;
811
}
912

10-
.bb-viewer-wrapper.show {
11-
display: block;
12-
}
13-
1413
.bb-viewer-mask {
1514
position: absolute;
1615
width: 100%;
@@ -117,12 +116,12 @@
117116
background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zycgd2lkdGg9JzY0JyBoZWlnaHQ9JzY0Jz48cGF0aCBkPSdNODc1Ljc1OTM2IDk1MS4wNEgxNDguNzE5MzZBMTU4LjcyIDE1OC43MiAwIDAgMSAwLjIzOTM2IDc4NHYtNTQ0YTE1OC43MiAxNTguNzIgMCAwIDEgMTQ4LjQ4LTE2Ny4wNGg3MjcuMDRBMTU4LjcyIDE1OC43MiAwIDAgMSAxMDI0LjIzOTM2IDI0MHY1NDRhMTU4LjcyIDE1OC43MiAwIDAgMS0xNDguNDggMTY3LjA0ek0xNDguNzE5MzYgMTc0LjA4YTY0IDY0IDAgMCAwLTU4LjI0IDY0djU0NGE2NCA2NCAwIDAgMCA1OC4yNCA2NGg3MjcuMDRhNjQgNjQgMCAwIDAgNTguMjQtNjRWMjQwYTY0IDY0IDAgMCAwLTU4LjI0LTY0eicgZmlsbD0nI2ZmZmZmZic+PC9wYXRoPjxwYXRoIGQ9J00yNDUuMzU5MzYgMzExLjA0bTQ3LjM2IDBsMC42NCAwcTQ3LjM2IDAgNDcuMzYgNDcuMzZsMCAzMDcuODRxMCA0Ny4zNi00Ny4zNiA0Ny4zNmwtMC42NCAwcS00Ny4zNiAwLTQ3LjM2LTQ3LjM2bDAtMzA3Ljg0cTAtNDcuMzYgNDcuMzYtNDcuMzZaJyBmaWxsPScjZmZmZmZmJz48L3BhdGg+PHBhdGggZD0nTTY4NC4zOTkzNiAzMTEuMDRtNDcuMzYgMGwwLjY0IDBxNDcuMzYgMCA0Ny4zNiA0Ny4zNmwwIDMwNy44NHEwIDQ3LjM2LTQ3LjM2IDQ3LjM2bC0wLjY0IDBxLTQ3LjM2IDAtNDcuMzYtNDcuMzZsMC0zMDcuODRxMC00Ny4zNiA0Ny4zNi00Ny4zNlonIGZpbGw9JyNmZmZmZmYnPjwvcGF0aD48cGF0aCBkPSdNNTEyLjIzOTM2IDQyOC4xNm0tNDAuMzIgMGE0MC4zMiA0MC4zMiAwIDEgMCA4MC42NCAwIDQwLjMyIDQwLjMyIDAgMSAwLTgwLjY0IDBaJyBmaWxsPScjZmZmZmZmJz48L3BhdGg+PHBhdGggZD0nTTUxMi4yMzkzNiA1OTUuODRtLTQwLjMyIDBhNDAuMzIgNDAuMzIgMCAxIDAgODAuNjQgMCA0MC4zMiA0MC4zMiAwIDEgMC04MC42NCAwWicgZmlsbD0nI2ZmZmZmZic+PC9wYXRoPjwvc3ZnPg==") center/24px auto no-repeat;
118117
}
119118

120-
.bb-viewer-wrapper.active .bb-viewer-full-screen {
119+
.bb-previewer.active .bb-viewer-full-screen {
121120
background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTE1MiAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zycgd2lkdGg9JzY0JyBoZWlnaHQ9JzY0Jz48cGF0aCBkPSdNOTk4LjQgNDE0LjIwOGMwIDI5LjE4NC0yMy41NTIgNTIuNzM2LTUyLjczNiA1Mi43MzYtMjkuMTg0IDAtNTIuNzM2LTIzLjU1Mi01Mi43MzYtNTIuNzM2VjIwMi43NTJoLTIxMS40NTZjLTI5LjE4NCAwLTUyLjczNi0yMy41NTItNTIuNzM2LTUyLjczNiAwLTI5LjE4NCAyMy41NTItNTIuNzM2IDUyLjczNi01Mi43MzZoMjExLjQ1NmM1Ny44NTYgMCAxMDUuNDcyIDQ3LjYxNiAxMDUuNDcyIDEwNS40NzJ2MjExLjQ1NnpNNDcwLjUyOCA5NDIuMDhIMjU5LjA3MmMtNTcuODU2IDAtMTA1LjQ3Mi00Ny42MTYtMTA1LjQ3Mi0xMDUuNDcydi0yMTAuOTQ0YzAtMjkuMTg0IDIzLjU1Mi01Mi43MzYgNTIuNzM2LTUyLjczNiAyOS4xODQgMCA1Mi43MzYgMjMuNTUyIDUyLjczNiA1Mi43MzZ2MjEwLjk0NGgyMTEuNDU2YzI5LjE4NCAwIDUyLjczNiAyMy41NTIgNTIuNzM2IDUyLjczNiAwIDI5LjE4NC0yMy41NTIgNTIuNzM2LTUyLjczNiA1Mi43MzZ6IG0wLTczOS4zMjhIMjU5LjA3MnYtMC41MTIgMjExLjQ1NmMwIDI5LjE4NC0yMy41NTIgNTIuNzM2LTUyLjczNiA1Mi43MzZTMTUzLjYgNDQzLjM5MiAxNTMuNiA0MTQuMjA4VjIwMi43NTJDMTUzLjYgMTQ0Ljg5NiAyMDEuMjE2IDk3LjI4IDI1OS4wNzIgOTcuMjhoMjEwLjk0NGMyOS4xODQgMCA1Mi43MzYgMjMuNTUyIDUyLjczNiA1Mi43MzYgMC41MTIgMjkuMTg0LTIzLjA0IDUyLjczNi01Mi4yMjQgNTIuNzM2eiBtMjEwLjk0NCA2MzMuODU2aDIxMC45NDR2MC41MTItMjExLjQ1NmMwLTI5LjE4NCAyMy41NTItNTIuNzM2IDUyLjczNi01Mi43MzYgMjkuMTg0IDAgNTIuNzM2IDIzLjU1MiA1Mi43MzYgNTIuNzM2djIxMS40NTZjMCA1Ny44NTYtNDcuNjE2IDEwNS40NzItMTA1LjQ3MiAxMDUuNDcyaC0yMTAuOTQ0Yy0yOS4xODQgMC01Mi43MzYtMjMuNTUyLTUyLjczNi01Mi43MzYgMC0yOS42OTYgMjMuNTUyLTUzLjI0OCA1Mi43MzYtNTMuMjQ4eicgZmlsbD0nI2ZmZmZmZic+PC9wYXRoPjwvc3ZnPg==");
122121
background-size: 34px;
123122
}
124123

125-
.bb-viewer-wrapper.active .bb-viewer-canvas > img {
124+
.bb-previewer.active .bb-viewer-canvas > img {
126125
max-width: 100%;
127126
max-height: 100%;
128127
}

src/BootstrapBlazor/Components/ImageViewer/ImagePreview.razor renamed to src/BootstrapBlazor/Components/ImageViewer/ImagePreviewer.razor

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@namespace BootstrapBlazor.Components
2-
@inherits BootstrapComponentBase
2+
@inherits BootstrapModuleComponentBase
33

4-
<div tabindex="-1" class="bb-viewer-wrapper active" style="z-index: @ZIndex;">
4+
<div tabindex="-1" class="bb-previewer collapse active" id="@Id" style="z-index: @ZIndex;">
55
<div class="bb-viewer-mask"></div>
66
<div class="bb-viewer-canvas">
77
<img src="@GetFirstImageUrl()" class="bb-viewer-img" style="transform: scale(1) rotate(0deg); margin-left: 0px; margin-top: 0px;">

src/BootstrapBlazor/Components/ImageViewer/ImagePreview.razor.cs renamed to src/BootstrapBlazor/Components/ImageViewer/ImagePreviewer.razor.cs

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ namespace BootstrapBlazor.Components;
77
/// <summary>
88
/// 图片预览组件
99
/// </summary>
10-
public partial class ImagePreview
10+
[JSModuleAutoLoader("image-previewer")]
11+
public partial class ImagePreviewer
1112
{
1213
/// <summary>
1314
/// 获得/设置 原生 z-index 属性 默认 2050
@@ -28,4 +29,16 @@ public partial class ImagePreview
2829
private string? GetFirstImageUrl() => PreviewList.First();
2930

3031
private bool ShowButtons => PreviewList.Count > 1;
32+
33+
/// <summary>
34+
/// <inheritdoc/>
35+
/// </summary>
36+
/// <returns></returns>
37+
protected override Task ModuleInitAsync() => InvokeInitAsync(Id, PreviewList);
38+
39+
/// <summary>
40+
/// <inheritdoc/>
41+
/// </summary>
42+
/// <returns></returns>
43+
protected override Task ModuleExecuteAsync() => InvokeExecuteAsync(Id, PreviewList);
3144
}

‎src/BootstrapBlazor/Components/ImageViewer/ImageViewer.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,6 @@
1111
cursor: pointer;
1212
}
1313

14-
.is-img-preview {
15-
overflow: hidden;
16-
}
17-
1814
.bb-img-holder {
1915
background-color: var(--bs-secondary);
2016
position: absolute;

‎src/BootstrapBlazor/Components/ImageViewer/ImageViewer.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@namespace BootstrapBlazor.Components
22
@inherits BootstrapModuleComponentBase
33

4-
<div @attributes="AdditionalAttributes" class="@ClassString" id="@Id" data-bb-async="@IsAsyncString">
4+
<div @attributes="AdditionalAttributes" class="@ClassString" id="@Id" data-bb-previewer-id="@PreviewerId" data-bb-async="@IsAsyncString">
55
@if (ShowImage)
66
{
77
@RenderChildContent()
@@ -13,7 +13,7 @@
1313

1414
@if (ShowPreviewList)
1515
{
16-
<ImagePreview ZIndex="@ZIndex" PreviewList="PreviewList" />
16+
<ImagePreviewer Id="@PreviewerId" ZIndex="@ZIndex" PreviewList="PreviewList" />
1717
}
1818
</div>
1919

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,12 @@ public partial class ImageViewer
113113
/// <returns></returns>
114114
protected override Task ModuleInitAsync() => InvokeInitAsync(Id, Url);
115115

116+
/// <summary>
117+
/// <inheritdoc/>
118+
/// </summary>
119+
/// <returns></returns>
120+
protected override Task ModuleExecuteAsync() => InvokeExecuteAsync(Id, PreviewList);
121+
116122
private RenderFragment RenderChildContent() => builder =>
117123
{
118124
if (!IsError)
@@ -149,10 +155,6 @@ private RenderFragment RenderChildContent() => builder =>
149155
}
150156
}));
151157
}
152-
if (PreviewList != null && PreviewList.Count > 0)
153-
{
154-
builder.AddAttribute(5, "onclick", EventCallback.Factory.Create(this, () => InvokeExecuteAsync(Id, PreviewList)));
155-
}
156158
builder.CloseElement();
157159

158160
if (ShouldRenderPlaceHolder)
@@ -170,5 +172,7 @@ private RenderFragment RenderChildContent() => builder =>
170172

171173
private bool ShouldHandleError => HandleError || ErrorTemplate != null;
172174

173-
private bool ShowPreviewList => PreviewList != null && PreviewList.Count > 0;
175+
private bool ShowPreviewList => PreviewList?.Any() ?? false;
176+
177+
private string PreviewerId => $"prev_{Id}";
174178
}

‎src/BootstrapBlazor/Components/Upload/CardUpload.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
{
77
<BootstrapLabel required="@Required" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
88
}
9-
<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id">
9+
<div @attributes="@AdditionalAttributes" class="@ClassString" id="@Id" data-bb-previewer-id="@PreviewerId">
1010
<div class="@BodyClassString">
1111
@foreach (var item in GetUploadFiles())
1212
{
@@ -24,7 +24,7 @@
2424
<div class="upload-item-size"><span>@GetFileName(item)</span> (@item.Size.ToFileSizeString())</div>
2525
<div class="upload-item-actions">
2626
<div class="btn-group">
27-
<button type="button" class="btn btn-sm btn-secondary" disabled="@GetDiabledString(item)" @onclick="() => OnClickZoom(item)" aria-label="zoom">
27+
<button type="button" class="btn btn-sm btn-secondary btn-zoom" disabled="@GetDiabledString(item)" @onclick="() => OnClickZoom(item)" aria-label="zoom">
2828
<i class="fa-solid fa-magnifying-glass-plus"></i>
2929
</button>
3030
@if(ShowDownloadButton)
@@ -68,6 +68,6 @@
6868

6969
@if (ShowPreviewList)
7070
{
71-
<ImagePreview PreviewList="PreviewList" />
71+
<ImagePreviewer Id="@PreviewerId" PreviewList="PreviewList" />
7272
}
7373
</div>

‎src/BootstrapBlazor/Components/Upload/CardUpload.razor.cs‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ public partial class CardUpload<TValue>
2525
.AddClass("disabled", IsDisabled)
2626
.Build();
2727

28+
private string PreviewerId => $"prev_{Id}";
29+
2830
private static bool IsImage(UploadFile item)
2931
{
3032
bool ret;
@@ -65,9 +67,5 @@ private async Task OnClickZoom(UploadFile item)
6567
{
6668
await OnZoomAsync(item);
6769
}
68-
else
69-
{
70-
await JSRuntime.InvokeVoidAsync($"#{Id}", "bb_image_preview", PreviewList);
71-
}
7270
}
7371
}

‎src/BootstrapBlazor/wwwroot/css/bootstrap.blazor.bundle.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)