diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.cs b/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.cs index 05e29bb..5d1eee8 100644 --- a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.cs +++ b/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.cs @@ -17,6 +17,12 @@ public partial class ImageCropper [Parameter] public string? Url { get; set; } + /// + /// 获取/设置 是否被禁用 默认 false + /// + [Parameter] + public bool IsDisabled { get; set; } + /// /// 获得/设置 剪裁结果回调方法 /// @@ -40,6 +46,36 @@ public partial class ImageCropper .AddClassFromAttributes(AdditionalAttributes) .Build(); + private bool _isDisabled; + + /// + /// + /// + /// + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + await base.OnAfterRenderAsync(firstRender); + + if (firstRender) + { + _isDisabled = IsDisabled; + } + + if (_isDisabled != IsDisabled) + { + _isDisabled = IsDisabled; + if (IsDisabled) + { + await Disable(); + } + else + { + await Enable(); + } + } + } + /// /// /// @@ -87,13 +123,23 @@ public partial class ImageCropper /// 组件可用 /// /// - public Task Enable() => InvokeVoidAsync("enable", Id); + public Task Enable() + { + IsDisabled = false; + _isDisabled = false; + return InvokeVoidAsync("enable", Id); + } /// /// 禁用组件 /// /// - public Task Disable() => InvokeVoidAsync("disable", Id); + public Task Disable() + { + IsDisabled = true; + _isDisabled = true; + return InvokeVoidAsync("disable", Id); + } /// /// 清空图像 diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js b/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js index c6b505a..d4a4bc3 100644 --- a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js +++ b/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js @@ -96,6 +96,11 @@ export async function enable(id) { if (cropper != null) { cropper.enable(); } + + const el = document.getElementById(id); + if (el) { + el.classList.remove("disabled"); + } } export async function disable(id) { @@ -103,4 +108,9 @@ export async function disable(id) { if (cropper != null) { cropper.disable(); } + + const el = document.getElementById(id); + if (el) { + el.classList.add("disabled"); + } } diff --git a/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.bundle.css b/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.bundle.css index a04f720..afd3a49 100644 --- a/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.bundle.css +++ b/src/components/BootstrapBlazor.ImageCropper/wwwroot/cropper.bundle.css @@ -1,6 +1,7 @@ @import url('./cropper.min.css'); .bb-cropper { + --bb-crop-disabled-opacity: 0.65; max-width: 640px; width: 100%; height: 100%; @@ -14,3 +15,7 @@ .bb-cropper.is-round .cropper-face { border-radius: 50%; } + + .bb-cropper.disabled { + opacity: var(--bb-crop-disabled-opacity); + }