diff --git a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj index c347112ef60..1d800c1f36f 100644 --- a/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj +++ b/src/BootstrapBlazor.Server/BootstrapBlazor.Server.csproj @@ -75,7 +75,7 @@ - + diff --git a/src/BootstrapBlazor.Server/Locales/en-US.json b/src/BootstrapBlazor.Server/Locales/en-US.json index 5eb8bce193d..54c0c64f95d 100644 --- a/src/BootstrapBlazor.Server/Locales/en-US.json +++ b/src/BootstrapBlazor.Server/Locales/en-US.json @@ -3075,7 +3075,7 @@ "SelectsEnumTitle": "Enumerate the data", "SelectsEnumIntro": "an example of a type enumerated a select component binding", "SelectsEnumDescription1": "Enumeration When the binding value is an empty enumeration type, the component automatically adds preferences internally through the PlaceHolder value, and when the PlaceHolder value is not set, please select ... as a preference, and this example binds the EnumEducation enumeration type data", - "SelectsEnumDescription2": "Setting PalceHolder is not valid when the binding value is an enumerated type", + "SelectsEnumDescription2": "Setting PlaceHolder is not valid when the binding value is an enumerated type", "SelectsEnumSelectText1": "Can be empty", "SelectsEnumSelectText2": "Not empty", "SelectsEnumSelectText3": "Using enum integer values ​​as Items", diff --git a/src/BootstrapBlazor.Server/Locales/zh-CN.json b/src/BootstrapBlazor.Server/Locales/zh-CN.json index dfdd1d92a79..1e14cd7f276 100644 --- a/src/BootstrapBlazor.Server/Locales/zh-CN.json +++ b/src/BootstrapBlazor.Server/Locales/zh-CN.json @@ -3075,7 +3075,7 @@ "SelectsEnumTitle": "枚举数据", "SelectsEnumIntro": "Select 组件绑定枚举类型示例", "SelectsEnumDescription1": "当绑定值为可为空枚举类型时，组件内部自动通过 PlaceHolder 值添加首选项，未设置 PlaceHolder 值时，使用资源文件中的 请选择 ... 作为首选项，本示例绑定 EnumEducation 枚举类型", - "SelectsEnumDescription2": "绑定值为枚举类型时，设置 PalceHolder 无效", + "SelectsEnumDescription2": "绑定值为枚举类型时，设置 PlaceHolder 无效", "SelectsEnumSelectText1": "可为空", "SelectsEnumSelectText2": "不为空", "SelectsEnumSelectText3": "使用枚举整形值作为集合", diff --git a/src/BootstrapBlazor/BootstrapBlazor.csproj b/src/BootstrapBlazor/BootstrapBlazor.csproj index 0870eee5144..09d572d9971 100644 --- a/src/BootstrapBlazor/BootstrapBlazor.csproj +++ b/src/BootstrapBlazor/BootstrapBlazor.csproj @@ -1,7 +1,7 @@  - 9.8.1-beta06 + 9.8.1 diff --git a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor index b9b2e874c65..ff0f043e2d3 100644 --- a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor +++ b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor @@ -6,7 +6,7 @@ { } -
+
@if (IsUploadButtonAtFirst && ShowAddButton()) { @@ -41,6 +41,10 @@ @RenderAdd }
+ @if (ShowPreviewList) + { + + }
diff --git a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs index 53ca10c21f0..f0f32d4e66c 100644 --- a/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs +++ b/src/BootstrapBlazor/Components/Upload/AvatarUpload.razor.cs @@ -115,6 +115,12 @@ public partial class AvatarUpload .AddClass(InvalidStatusIcon) .Build(); + private bool ShowPreviewList => Files.Count != 0; + + private string PreviewerId => $"prev_{Id}"; + + private List PreviewList => [.. Files.Select(i => i.PrevUrl)]; + /// /// /// @@ -144,6 +150,18 @@ protected override async Task TriggerOnChanged(UploadFile file) await base.TriggerOnChanged(file); } + /// + /// 预览当前头像方法 + /// + /// + public async Task Preview() + { + if(ShowPreviewList) + { + await InvokeVoidAsync("preview", PreviewerId, 0); + } + } + private IReadOnlyCollection _results = []; /// diff --git a/src/BootstrapBlazor/wwwroot/modules/upload.js b/src/BootstrapBlazor/wwwroot/modules/upload.js index abf6f2c7d77..a8e445fb1d0 100644 --- a/src/BootstrapBlazor/wwwroot/modules/upload.js +++ b/src/BootstrapBlazor/wwwroot/modules/upload.js @@ -84,6 +84,13 @@ export function init(id) { }) } +export function preview(previewerId, index) { + const prev = Data.get(previewerId); + if (prev) { + prev.viewer.show(index); + } +} + export async function getPreviewUrl(id, fileName) { let url = ''; const upload = Data.get(id); diff --git a/test/UnitTest/Components/UploadAvatarTest.cs b/test/UnitTest/Components/UploadAvatarTest.cs index 508f34aaaf5..74a4f13648c 100644 --- a/test/UnitTest/Components/UploadAvatarTest.cs +++ b/test/UnitTest/Components/UploadAvatarTest.cs @@ -76,6 +76,9 @@ await cut.InvokeAsync(() => input.Instance.OnChange.InvokeAsync(new InputFileCha new() }))); + // call preview + await cut.InvokeAsync(() => cut.Instance.Preview()); + // upload-item-delete var button = cut.Find(".upload-item-delete"); await cut.InvokeAsync(() => button.Click());