feat: 增加禁用逻辑

BootstrapBlazor · Oct 12, 2024 · acd73ad · acd73ad
1 parent 33ccff8
commit acd73ad
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 2 deletions.
diff --git 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; }
 
+    /// <summary>
+    /// 获取/设置 是否被禁用 默认 false
+    /// </summary>
+    [Parameter]
+    public bool IsDisabled { get; set; }
+
     /// <summary>
     /// 获得/设置 剪裁结果回调方法
     /// </summary>
@@ -40,6 +46,36 @@ public partial class ImageCropper
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
+    private bool _isDisabled;
+
+    /// <summary>
+    /// <inheritdoc/>
+    /// </summary>
+    /// <param name="firstRender"></param>
+    /// <returns></returns>
+    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();
+            }
+        }
+    }
+
     /// <summary>
     /// <inheritdoc/>
     /// </summary>
@@ -87,13 +123,23 @@ public partial class ImageCropper
     /// 组件可用
     /// </summary>
     /// <returns></returns>
-    public Task Enable() => InvokeVoidAsync("enable", Id);
+    public Task Enable()
+    {
+        IsDisabled = false;
+        _isDisabled = false;
+        return InvokeVoidAsync("enable", Id);
+    }
 
     /// <summary>
     /// 禁用组件
     /// </summary>
     /// <returns></returns>
-    public Task Disable() => InvokeVoidAsync("disable", Id);
+    public Task Disable()
+    {
+        IsDisabled = true;
+        _isDisabled = true;
+        return InvokeVoidAsync("disable", Id);
+    }
 
     /// <summary>
     /// 清空图像

diff --git a/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js b/src/components/BootstrapBlazor.ImageCropper/ImageCropper.razor.js
@@ -96,11 +96,21 @@ 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) {
     const cropper = Data.get(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
@@ -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);
+    }