From 17efc7c43c74f2f1b04a4d9223db25fb109fe445 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 9 Oct 2022 01:14:24 +0800 Subject: [PATCH 1/5] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=E7=A4=BA=E4=BE=8B?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/Samples/QRCodes.razor.cs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Shared/Samples/QRCodes.razor.cs b/src/BootstrapBlazor.Shared/Samples/QRCodes.razor.cs index d8c7adf0e..594c6c949 100644 --- a/src/BootstrapBlazor.Shared/Samples/QRCodes.razor.cs +++ b/src/BootstrapBlazor.Shared/Samples/QRCodes.razor.cs @@ -34,6 +34,7 @@ public sealed partial class QRCodes [NotNull] private IStringLocalizer? Localizer { get; set; } + [NotNull] private BlockLogger? Trace { get; set; } /// /// OnInitialized 方法 @@ -51,7 +52,7 @@ public sealed partial class QRCodes private Task OnGenerated() { - Trace?.Log(SuccessText); + Trace.Log(SuccessText); return Task.CompletedTask; } -- Gitee From 74766ccea2a386566f00b4298353eea23c8e28b4 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 9 Oct 2022 01:15:11 +0800 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20BarCode=20?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/QRCode/QRCode.js | 80 ++++++++++++------- .../Components/QRCode/QRCode.razor | 4 +- .../Components/QRCode/QRCode.razor.cs | 71 ++++++++-------- .../wwwroot/qrcode.bundle.min.js | 2 +- 4 files changed, 87 insertions(+), 70 deletions(-) diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.js b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.js index dc4986428..35a81d372 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.js +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.js @@ -1,38 +1,58 @@ -export function bb_qrcode(el, method, text, obj) { - BootstrapBlazorModules.addScript('./_content/BootstrapBlazor.BarCode/modules/qrcode.min.js'); +import BlazorComponent from "../../../_content/BootstrapBlazor/modules/base/blazor-component.js"; - const handler = window.setInterval(function () { - if (typeof QRCode === 'function') { - window.clearInterval(handler); +export class BlazorQRCode extends BlazorComponent { + _init() { + // arguments list: methodName content callbackFn + BootstrapBlazorModules.addScript('./_content/BootstrapBlazor.BarCode/modules/qrcode.min.js'); - dowork(); - } - }, 100); + const handler = window.setInterval(() => { + if (typeof QRCode === 'function') { + window.clearInterval(handler); + + dowork(); + } + }, 100); + + this._qr = this._element.querySelector(this._config.QRSELECTOR); + this._invokerName = this._config.arguments[3]; - const defaultConfig = { - width: 128, - height: 128, - colorDark: '#000000', - colorLight: '#ffffff' - }; + const dowork = () => { + this._qr.innerHTML = ''; + this._execute(this._config.arguments); + }; + } - const dowork = function () { - const qr = el.querySelector('.qrcode-img'); - qr.innerHTML = ''; + _execute(args) { + const obj = args[0]; + const method = args[1]; + const text = args[2]; if (method === 'generate') { - const config = { - ...defaultConfig, - ...{ - width: el.getAttribute('data-bb-width'), - height: el.getAttribute('data-bb-width'), - colorDark: el.getAttribute('data-bb-dark-color'), - colorLight: el.getAttribute('data-bb-light-color'), - text: text, - correctLevel: QRCode.CorrectLevel.H + if (this._qrcode === undefined) { + const config = { + ...this._config, + ...{ + height: this._config.width, + text: text, + correctLevel: QRCode.CorrectLevel.H + } } + this._qrcode = new QRCode(this._qr, config); } - new QRCode(qr, config); - obj.invokeMethodAsync('Generated'); + else { + this._qrcode.clear(); + this._qrcode.makeCode(text); + } + obj.invokeMethodAsync(this._invokerName); + } + } + + static get Default() { + return { + width: 128, + height: 128, + colorDark: '#000000', + colorLight: '#ffffff', + QRSELECTOR: '.qrcode-img' } - }; -} + } +} diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor index 9e68c23c1..ed1e985ca 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor @@ -1,7 +1,7 @@ @namespace BootstrapBlazor.Components -@inherits BootstrapComponentBase +@inherits BootstrapModuleComponentBase -
+
@if (ShowButtons) { diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs index 5562cdff2..ed1e26e01 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs @@ -9,6 +9,7 @@ namespace BootstrapBlazor.Components; /// /// QRCode 组件 /// +[JSModuleAutoLoader("./_content/BootstrapBlazor.BarCode/qrcode.bundle.min.js", ModuleName = "BlazorQRCode", Relative = false)] public partial class QRCode : IAsyncDisposable { private ElementReference QRCodeElement { get; set; } @@ -89,10 +90,7 @@ public partial class QRCode : IAsyncDisposable [Parameter] public int Width { get; set; } = 128; - private string? MethodName { get; set; } - - [NotNull] - private JSModule? Module { get; set; } + private string? MethodName { get; set; } = "generate"; [Inject] [NotNull] @@ -109,65 +107,64 @@ public partial class QRCode : IAsyncDisposable PlaceHolder ??= Localizer[nameof(PlaceHolder)]; ClearButtonText ??= Localizer[nameof(ClearButtonText)]; GenerateButtonText ??= Localizer[nameof(GenerateButtonText)]; - - Generate(); } /// - /// OnParametersSet 方法 + /// /// - protected override async Task OnAfterRenderAsync(bool firstRender) + /// + protected override async Task ModuleInvokeVoidAsync(bool firstRender) { - if (!string.IsNullOrEmpty(MethodName)) + if (firstRender) { - if (Module == null) - { - var jSObjectReference = await JSRuntime.InvokeAsync("import", "./_content/BootstrapBlazor.BarCode/qrcode.bundle.min.js"); - Module = new JSModule(jSObjectReference, this); - } - await Module.InvokeVoidAsync("bb_qrcode", QRCodeElement, MethodName, Content ?? ""); - MethodName = null; + await ModuleInitAsync(); + } + else + { + await ModuleExecuteAsync(); } - } - - private void Clear() => MethodName = "clear"; - private void Generate() => MethodName = string.IsNullOrEmpty(Content) ? "clear" : "generate"; + MethodName = ""; + } /// - /// + /// /// /// - [JSInvokable] - public async Task Generated() + protected override async Task ModuleInitAsync() { - if (OnGenerated != null) + if (Module != null) { - await OnGenerated.Invoke(); + await Module.InvokeVoidAsync($"{ModuleName}.init", QRCodeElement, MethodName, Content, nameof(Generated)); } } /// - /// Dispose 方法 + /// /// - /// - protected virtual async ValueTask DisposeAsync(bool disposing) + /// + protected override async Task ModuleExecuteAsync() { - if (disposing) + if (!string.IsNullOrEmpty(Content) && Module != null) { - if (Module != null) - { - await Module.DisposeAsync(); - } + await Module.InvokeVoidAsync($"{ModuleName}.execute", QRCodeElement, MethodName, Content); } } + private void Clear() => MethodName = "clear"; + + private void Generate() => MethodName = string.IsNullOrEmpty(Content) ? "clear" : "generate"; + /// - /// Dispose 方法 + /// /// - public async ValueTask DisposeAsync() + /// + [JSInvokable] + public async Task Generated() { - await DisposeAsync(true); - GC.SuppressFinalize(this); + if (OnGenerated != null) + { + await OnGenerated(); + } } } diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/wwwroot/qrcode.bundle.min.js b/src/Extensions/Components/BootstrapBlazor.BarCode/wwwroot/qrcode.bundle.min.js index f17336a04..afe341c0c 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/wwwroot/qrcode.bundle.min.js +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/wwwroot/qrcode.bundle.min.js @@ -1 +1 @@ -export function bb_qrcode(n,t,i,r){BootstrapBlazorModules.addScript("./_content/BootstrapBlazor.BarCode/modules/qrcode.min.js");const u=window.setInterval(function(){typeof QRCode=="function"&&(window.clearInterval(u),e())},100),f={width:128,height:128,colorDark:"#000000",colorLight:"#ffffff"},e=function(){const u=n.querySelector(".qrcode-img");if(u.innerHTML="",t==="generate"){const t={...f,...{width:n.getAttribute("data-bb-width"),height:n.getAttribute("data-bb-width"),colorDark:n.getAttribute("data-bb-dark-color"),colorLight:n.getAttribute("data-bb-light-color"),text:i,correctLevel:QRCode.CorrectLevel.H}};new QRCode(u,t);r.invokeMethodAsync("Generated")}}} \ No newline at end of file +import BlazorComponent from"../../../_content/BootstrapBlazor/modules/base/blazor-component.js";export class BlazorQRCode extends BlazorComponent{_init(){BootstrapBlazorModules.addScript("./_content/BootstrapBlazor.BarCode/modules/qrcode.min.js");const n=window.setInterval(()=>{typeof QRCode=="function"&&(window.clearInterval(n),t())},100);this._qr=this._element.querySelector(this._config.QRSELECTOR);this._invokerName=this._config.arguments[3];const t=()=>{this._qr.innerHTML="",this._execute(this._config.arguments)}}_execute(n){const i=n[0],r=n[1],t=n[2];if(r==="generate"){if(this._qrcode===undefined){const n={...this._config,...{height:this._config.width,text:t,correctLevel:QRCode.CorrectLevel.H}};this._qrcode=new QRCode(this._qr,n)}else this._qrcode.clear(),this._qrcode.makeCode(t);i.invokeMethodAsync(this._invokerName)}}static get Default(){return{width:128,height:128,colorDark:"#000000",colorLight:"#ffffff",QRSELECTOR:".qrcode-img"}}} \ No newline at end of file -- Gitee From 32c3c4ab58ed4320ad44751892b29c7d8dc17bc2 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 9 Oct 2022 01:39:49 +0800 Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=E8=84=9A?= =?UTF-8?q?=E6=9C=AC=E6=A8=A1=E5=9D=97=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Components/QRCode/QRCode.razor | 2 +- .../Components/QRCode/QRCode.razor.cs | 59 +++++++++++-------- 2 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor index ed1e985ca..4f62dd355 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor @@ -1,5 +1,5 @@ @namespace BootstrapBlazor.Components -@inherits BootstrapModuleComponentBase +@inherits BootstrapComponentBase
diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs index ed1e26e01..ba7ed8cda 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/Components/QRCode/QRCode.razor.cs @@ -9,7 +9,6 @@ namespace BootstrapBlazor.Components; /// /// QRCode 组件 /// -[JSModuleAutoLoader("./_content/BootstrapBlazor.BarCode/qrcode.bundle.min.js", ModuleName = "BlazorQRCode", Relative = false)] public partial class QRCode : IAsyncDisposable { private ElementReference QRCodeElement { get; set; } @@ -20,6 +19,12 @@ public partial class QRCode : IAsyncDisposable private string? ImageStyleString => $"width: {Width}px; height: {Width}px;"; + /// + /// Instance of + /// + [NotNull] + protected JSModule? Module { get; set; } + /// /// 获得/设置 二维码生成后回调委托 /// @@ -113,58 +118,64 @@ public partial class QRCode : IAsyncDisposable /// ///
/// - protected override async Task ModuleInvokeVoidAsync(bool firstRender) + /// + protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { - await ModuleInitAsync(); + Module ??= await JSRuntime.LoadModule("./_content/BootstrapBlazor.BarCode/qrcode.bundle.min.js", this, false); + await Module.InvokeVoidAsync("BlazorQRCode.init", QRCodeElement, MethodName, Content, nameof(Generated)); } else { - await ModuleExecuteAsync(); + await Module.InvokeVoidAsync("BlazorQRCode.execute", QRCodeElement, MethodName, Content); } - MethodName = ""; } + private void Clear() => MethodName = "clear"; + + private void Generate() => MethodName = string.IsNullOrEmpty(Content) ? "clear" : "generate"; + /// - /// + /// /// /// - protected override async Task ModuleInitAsync() + [JSInvokable] + public async Task Generated() { - if (Module != null) + if (OnGenerated != null) { - await Module.InvokeVoidAsync($"{ModuleName}.init", QRCodeElement, MethodName, Content, nameof(Generated)); + await OnGenerated(); } } /// - /// + /// Performs application-defined tasks associated with freeing, releasing, or resetting unmanaged resources asynchronously. /// + /// /// - protected override async Task ModuleExecuteAsync() + protected virtual async ValueTask DisposeAsync(bool disposing) { - if (!string.IsNullOrEmpty(Content) && Module != null) + if (disposing) { - await Module.InvokeVoidAsync($"{ModuleName}.execute", QRCodeElement, MethodName, Content); + if (Module != null) + { + await Module.InvokeVoidAsync("BlazorQRCode.dispose", QRCodeElement); + await Module.DisposeAsync(); + Module = null; + } } } - private void Clear() => MethodName = "clear"; - - private void Generate() => MethodName = string.IsNullOrEmpty(Content) ? "clear" : "generate"; - /// - /// + /// /// /// - [JSInvokable] - public async Task Generated() + /// + public async ValueTask DisposeAsync() { - if (OnGenerated != null) - { - await OnGenerated(); - } + await DisposeAsync(true); + GC.SuppressFinalize(this); } } -- Gitee From 32f4774804d008d601fba4267653a26c5da6a511 Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 9 Oct 2022 01:40:10 +0800 Subject: [PATCH 4/5] chore: bump version 6.0.3 --- .../BootstrapBlazor.BarCode/BootstrapBlazor.BarCode.csproj | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Extensions/Components/BootstrapBlazor.BarCode/BootstrapBlazor.BarCode.csproj b/src/Extensions/Components/BootstrapBlazor.BarCode/BootstrapBlazor.BarCode.csproj index 6f719f40f..afeed5596 100644 --- a/src/Extensions/Components/BootstrapBlazor.BarCode/BootstrapBlazor.BarCode.csproj +++ b/src/Extensions/Components/BootstrapBlazor.BarCode/BootstrapBlazor.BarCode.csproj @@ -3,7 +3,7 @@ - 6.0.2 + 6.0.3 @@ -24,7 +24,7 @@ - + -- Gitee From 4a4c35b8e109f3d27569ad9a7af3c2d37d74797c Mon Sep 17 00:00:00 2001 From: Argo-Lenovo Date: Sun, 9 Oct 2022 01:43:17 +0800 Subject: [PATCH 5/5] =?UTF-8?q?doc:=20=E6=9B=B4=E6=96=B0=20Barcode=20?= =?UTF-8?q?=E5=8C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj b/src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj index 67ecd02e9..f799c2acf 100644 --- a/src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj +++ b/src/BootstrapBlazor.Shared/BootstrapBlazor.Shared.csproj @@ -19,7 +19,7 @@ - + -- Gitee