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);
+ }