fix(checkbox-group): dynamic modification of disabled attribute is in…

…valid (#2647) * fix(checkbox-group): dynamic modification of disabled attribute is invalid * perf(checkbox): optimize tap event
Tencent · Mar 29, 2024 · b582fa5 · b582fa5
1 parent be7f8e4
commit b582fa5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 14 deletions.
diff --git a/src/checkbox-group/checkbox-group.ts b/src/checkbox-group/checkbox-group.ts
@@ -29,6 +29,15 @@ export default class CheckBoxGroup extends SuperComponent {
     options() {
       this.initWithOptions();
     },
+    disabled(v) {
+      if (this.data.options?.length) {
+        this.initWithOptions();
+        return;
+      }
+      this.getChildren().forEach((item) => {
+        item.setDisabled(v);
+      });
+    },
   };
 
   lifetimes = {

diff --git a/src/checkbox/checkbox.ts b/src/checkbox/checkbox.ts
@@ -24,7 +24,7 @@ export default class CheckBox extends SuperComponent {
         const valueSet = new Set(value);
         const checkedFromParent = valueSet.has(this.data.value);
         const data: any = {
-          disabled: this.data.disabled == null ? disabled : this.data.disabled,
+          _disabled: this.data.disabled == null ? disabled : this.data.disabled,
         };
 
         if (borderless) {
@@ -62,6 +62,13 @@ export default class CheckBox extends SuperComponent {
   data = {
     prefix,
     classPrefix: name,
+    _disabled: false,
+  };
+
+  observers = {
+    disabled(v) {
+      this.setData({ _disabled: v });
+    },
   };
 
   controlledProps = [
@@ -73,16 +80,11 @@ export default class CheckBox extends SuperComponent {
 
   methods = {
     handleTap(e: WechatMiniprogram.TouchEvent) {
-      const { disabled, readonly } = this.data;
-
-      if (disabled || readonly) return;
-
+      const { _disabled, readonly, contentDisabled } = this.data;
       const { target } = e.currentTarget.dataset;
-      const { contentDisabled } = this.data;
 
-      if (target === 'text' && contentDisabled) {
-        return;
-      }
+      if (_disabled || readonly || (target === 'text' && contentDisabled)) return;
+
       const { value, label } = this.data;
       const checked = !this.data.checked;
       const parent = this.$parent;
@@ -93,5 +95,11 @@ export default class CheckBox extends SuperComponent {
         this._trigger('change', { context: { value, label }, checked });
       }
     },
+
+    setDisabled(disabled: Boolean) {
+      this.setData({
+        _disabled: this.data.disabled || disabled,
+      });
+    },
   };
 }
diff --git a/src/checkbox/checkbox.wxml b/src/checkbox/checkbox.wxml
@@ -5,13 +5,13 @@
   class="{{_.cls(classPrefix, [placement, theme, ['checked', checked], ['block', block]])}} class {{prefix}}-class"
   aria-role="checkbox"
   aria-checked="{{checked ? (indeterminate ? 'mixed' : true) : false}}"
-  aria-disabled="{{disabled ? true : false}}"
+  aria-disabled="{{_disabled ? true : false}}"
   mut-bind:tap="handleTap"
   tabindex="{{tabindex}}"
 >
   <view
     wx:if="{{theme == 'default'}}"
-    class="{{_.cls(classPrefix + '__icon', [placement, ['checked', checked], ['disabled', disabled]])}} {{prefix}}-class-icon"
+    class="{{_.cls(classPrefix + '__icon', [placement, ['checked', checked], ['disabled', _disabled]])}} {{prefix}}-class-icon"
   >
     <slot name="icon" wx:if="{{icon === 'slot'}}" />
     <view wx:elif="{{_.isArray(icon)}}" class="{{classPrefix}}__icon">
@@ -34,22 +34,22 @@
       />
       <view
         wx:elif="{{!checked && (icon == 'circle' || icon == 'rectangle')}}"
-        class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', disabled]])}}"
+        class="{{_.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])}}"
       />
       <view wx:if="{{!checked && icon == 'line'}}" class="placeholder"></view>
     </block>
   </view>
   <view class="{{classPrefix}}__content" data-target="text" mut-bind:tap="handleTap">
     <view
-      class="{{_.cls(classPrefix + '__title', [['disabled', disabled], ['checked', checked]])}} {{prefix}}-class-label"
+      class="{{_.cls(classPrefix + '__title', [['disabled', _disabled], ['checked', checked]])}} {{prefix}}-class-label"
       style="-webkit-line-clamp:{{maxLabelRow}}"
     >
       {{label}}
       <slot />
       <slot name="label" />
     </view>
     <view
-      class="{{_.cls(classPrefix + '__description', [['disabled', disabled]])}} {{prefix}}-class-content "
+      class="{{_.cls(classPrefix + '__description', [['disabled', _disabled]])}} {{prefix}}-class-content "
       style="-webkit-line-clamp:{{maxContentRow}}"
       >{{content}}<slot name="content"
     /></view>