fix(popup): resolve scroll over throught (#2290)

* fix(popup): resolve scroll over throught * test: update snapshot * fix(popup): prevent scroll throught
Tencent · Aug 16, 2023 · e2a4c8f · e2a4c8f
1 parent 277d8c7
commit e2a4c8f
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 6 deletions.
diff --git a/src/calendar/__test__/__snapshots__/index.test.js.snap b/src/calendar/__test__/__snapshots__/index.test.js.snap
@@ -13,7 +13,10 @@ exports[`calendar :base 1`] = `
         bind:transitionend="onTransitionEnd"
       >
         <wx-view
+          $gdc="{{[Function]}}"
+          $wxs:bind:touchmove="{{[Function]}}"
           class="t-popup__content t-class-content"
+          data-prevention="{{true}}"
         >
           <wx-view
             class="t-calendar t-calendar--popup class t-class"

diff --git a/src/date-time-picker/__test__/__snapshots__/index.test.js.snap b/src/date-time-picker/__test__/__snapshots__/index.test.js.snap
@@ -21,7 +21,10 @@ exports[`date-time-picker :base 1`] = `
           bind:transitionend="onTransitionEnd"
         >
           <wx-view
+            $gdc="{{[Function]}}"
+            $wxs:bind:touchmove="{{[Function]}}"
             class="t-popup__content t-class-content"
+            data-prevention="{{true}}"
           >
             <wx-view
               class="t-picker t-class"

diff --git a/src/dialog/__test__/__snapshots__/index.test.js.snap b/src/dialog/__test__/__snapshots__/index.test.js.snap
@@ -16,7 +16,10 @@ exports[`dialog :base 1`] = `
         bind:transitionend="onTransitionEnd"
       >
         <wx-view
+          $gdc="{{[Function]}}"
+          $wxs:bind:touchmove="{{[Function]}}"
           class="t-popup__content t-class-content"
+          data-prevention="{{true}}"
         >
           <wx-view
             class="t-dialog t-class"

diff --git a/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap b/src/dropdown-menu/__test__/__snapshots__/index.test.js.snap
@@ -96,7 +96,10 @@ exports[`dropdown-menu :base 1`] = `
               bind:transitionend="onTransitionEnd"
             >
               <wx-view
+                $gdc="{{[Function]}}"
+                $wxs:bind:touchmove="{{[Function]}}"
                 class="t-popup__content t-class-content"
+                data-prevention="{{true}}"
               >
                 <wx-view
                   class="t-dropdown-item__body"

diff --git a/src/picker/__test__/__snapshots__/index.test.js.snap b/src/picker/__test__/__snapshots__/index.test.js.snap
@@ -18,7 +18,10 @@ exports[`picker :base 1`] = `
       bind:transitionend="onTransitionEnd"
     >
       <wx-view
+        $gdc="{{[Function]}}"
+        $wxs:bind:touchmove="{{[Function]}}"
         class="t-popup__content t-class-content"
+        data-prevention="{{true}}"
       >
         <wx-view
           class="t-picker t-class"

diff --git a/src/popup/popup.ts b/src/popup/popup.ts
@@ -29,8 +29,6 @@ export default class Popup extends SuperComponent {
   };
 
   methods = {
-    onStopPropagation() {},
-
     handleOverlayClick() {
       const { closeOnOverlayClick } = this.properties;
       if (closeOnOverlayClick) {

diff --git a/src/popup/popup.wxml b/src/popup/popup.wxml
@@ -1,14 +1,18 @@
-<wxs src="./popup.wxs" module="utils" />
+<wxs src="./popup.wxs" module="popup" />
 <wxs src="../common/utils.wxs" module="_" />
 
 <view
   wx:if="{{realVisible}}"
-  style="{{_._style([utils.getPopupStyles(zIndex), style, customStyle])}}"
+  style="{{_._style([popup.getPopupStyles(zIndex), style, customStyle])}}"
   class="{{_.cls(classPrefix, [placement])}} {{transitionClass}} class {{prefix}}-class"
   bind:transitionend="onTransitionEnd"
 >
   <!-- 暂时移除：aria-role="dialog" aria-modal="{{ true }}"，关联：https://github.com/Tencent/tdesign-miniprogram/issues/2142 -->
-  <view class="{{classPrefix}}__content {{prefix}}-class-content">
+  <view
+    data-prevention="{{preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false)}}"
+    bind:touchmove="{{popup.onContentTouchMove}}"
+    class="{{classPrefix}}__content {{prefix}}-class-content"
+  >
     <slot name="content" />
     <slot />
     <view class="{{classPrefix}}__close" bind:tap="handleClose">
@@ -23,7 +27,7 @@
   wx:if="{{showOverlay}}"
   visible="{{visible}}"
   z-index="{{overlayProps && overlayProps.zIndex || 11000}}"
-  prevent-scroll-through="{{preventScrollThrough || overlayProps && overlayProps.preventScrollThrough}}"
+  prevent-scroll-through="{{preventScrollThrough || (overlayProps ? !!overlayProps.preventScrollThrough : false)}}"
   bind:tap="handleOverlayClick"
   custom-style="{{overlayProps && overlayProps.style || ''}}"
 />
diff --git a/src/popup/popup.wxs b/src/popup/popup.wxs
@@ -3,6 +3,13 @@ function getPopupStyles(zIndex) {
   return zIndexStyle;
 }
 
+function onContentTouchMove (e) {
+  if (e.target.dataset.prevention) {
+    return false;
+  };
+}
+
 module.exports = {
   getPopupStyles: getPopupStyles,
+  onContentTouchMove: onContentTouchMove
 };