chore: popup 隐藏时，mask不阻挡点击

Author: QiuShuiBai

packages/mpx-cube-ui/lib/components/popup/index.mpx

@@ -5,7 +5,7 @@
       wx:class="{{ [themeType ? 'cube-popup cube-popup-'+themeType : 'cube-popup', rootClass, visibleClass] }}"
       wx:style="{{ popupStyle }}"
     >
-      <view class="cube-popup-mask" wx:if="{{ mask }}" bindtouchend="onMaskClick" wx:style="{{ [styleConfig.mask, maskOpacity] }}">
+      <view class="cube-popup-mask" wx:if="{{ mask }}" bindtouchend="onMaskClick" wx:style="{{ [styleConfig.mask, maskStyle] }}">
         <!-- 遮罩插槽 -->
         <slot name="mask"></slot>
       </view>
@@ -30,7 +30,7 @@
       <view
         class="cube-popup-mask"
         wx:if="{{ mask }}"
-        wx:style="{{ [styleConfig.mask, maskOpacity] }}"
+        wx:style="{{ [styleConfig.mask, maskStyle] }}"
         bindtouchmove="preventTouchMove"
         bindtouchend="onMaskClick">
         <!-- 遮罩插槽 -->
@@ -57,7 +57,7 @@
       <view
         class="cube-popup-mask"
         wx:if="{{ mask }}"
-        wx:style="{{ styleConfig.mask }}"
+        wx:style="{{ [styleConfig.mask, maskStyle] }}"
         animation="{{ maskAnimationData }}"
         bindtouchend="onMaskClick">
         <slot name="mask"></slot>

packages/mpx-cube-ui/lib/components/popup/popup.js

@@ -70,6 +70,14 @@ createComponent({
             if (this.pointerEvents) {
                 style.pointerEvents = this.pointerEvents;
             }
+            if (!this.isVisible) {
+                if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+                    style.pointerEvents = 'box-none';
+                }
+                else {
+                    style.pointerEvents = 'none';
+                }
+            }
             return style;
         },
         rootClass() {
@@ -94,18 +102,23 @@ createComponent({
             }
             return cls;
         },
-        maskOpacity() {
-            // eslint-disable-next-line
-            // @ts-ignore
+        maskStyle() {
+            const style = {};
             if (__mpx_mode__ !== 'ios' &&
                 __mpx_mode__ !== 'android' &&
                 this.styleConfig.mask?.visibleOpacity &&
                 this.isVisible) {
-                return {
-                    opacity: this.styleConfig.mask.visibleOpacity
-                };
+                style.opacity = this.styleConfig.mask.visibleOpacity;
+            }
+            if (!this.isVisible) {
+                if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+                    style.pointerEvents = 'box-none';
+                }
+                else {
+                    style.pointerEvents = 'none';
+                }
             }
-            return {};
+            return style;
         }
     },
     methods: {

packages/mpx-cube-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/mpx-cube-ui",
-  "version": "1.3.12",
+  "version": "1.3.14-beta.2",
   "description": "mpx components library",
   "author": "xiaolei <[email protected]>",
   "publishConfig": {

packages/mpx-cube-ui/src/components/popup/index.mpx

@@ -5,7 +5,7 @@
       wx:class="{{ [themeType ? 'cube-popup cube-popup-'+themeType : 'cube-popup', rootClass, visibleClass] }}"
       wx:style="{{ popupStyle }}"
     >
-      <view class="cube-popup-mask" wx:if="{{ mask }}" bindtouchend="onMaskClick" wx:style="{{ [styleConfig.mask, maskOpacity] }}">
+      <view class="cube-popup-mask" wx:if="{{ mask }}" bindtouchend="onMaskClick" wx:style="{{ [styleConfig.mask, maskStyle] }}">
         <!-- 遮罩插槽 -->
         <slot name="mask"></slot>
       </view>
@@ -30,7 +30,7 @@
       <view
         class="cube-popup-mask"
         wx:if="{{ mask }}"
-        wx:style="{{ [styleConfig.mask, maskOpacity] }}"
+        wx:style="{{ [styleConfig.mask, maskStyle] }}"
         bindtouchmove="preventTouchMove"
         bindtouchend="onMaskClick">
         <!-- 遮罩插槽 -->
@@ -57,7 +57,7 @@
       <view
         class="cube-popup-mask"
         wx:if="{{ mask }}"
-        wx:style="{{ styleConfig.mask }}"
+        wx:style="{{ [styleConfig.mask, maskStyle] }}"
         animation="{{ maskAnimationData }}"
         bindtouchend="onMaskClick">
         <slot name="mask"></slot>

packages/mpx-cube-ui/src/components/popup/popup.ts

@@ -76,6 +76,13 @@ createComponent({
       if (this.pointerEvents) {
         style.pointerEvents = this.pointerEvents
       }
+      if (!this.isVisible) {
+        if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+          style.pointerEvents = 'box-none'
+        } else {
+          style.pointerEvents = 'none'
+        }
+      }
       return style
     },
     rootClass() {
@@ -99,20 +106,25 @@ createComponent({
       }
       return cls
     },
-    maskOpacity() {
-      // eslint-disable-next-line
-      // @ts-ignore
+    maskStyle() {
+      const style: Record<string, string> = {}
       if (
         __mpx_mode__ !== 'ios' &&
         __mpx_mode__ !== 'android' &&
         this.styleConfig.mask?.visibleOpacity &&
         this.isVisible
       ) {
-        return {
-          opacity: this.styleConfig.mask.visibleOpacity
+        style.opacity = this.styleConfig.mask.visibleOpacity
+      }
+
+      if (!this.isVisible) {
+        if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
+          style.pointerEvents = 'box-none'
+        } else {
+          style.pointerEvents = 'none'
         }
       }
-      return {}
+      return style
     }
   },
   methods: {