Repository: Tencent/tdesign-mobile-vue
Pull request #834 (2023-06-08 03:18:27)

fix(Popup): resolved the content cannot be scrolled
<!--
首先，感谢你的贡献！😄
请阅读并遵循 [TDesign 贡献指南](https://github.com/Tencent/tdesign/blob/main/docs/contributing.md)，填写以下 pull request 的信息。
PR 在维护者审核通过后会合并，谢谢！
-->

### 🤔 这个 PR 的性质是？

- [x] 日常 bug 修复
- [ ] 新特性提交
- [ ] 文档改进
- [ ] 演示代码改进
- [ ] 组件样式/交互改进
- [ ] CI/CD 改进
- [ ] 重构
- [ ] 代码风格优化
- [ ] 测试用例
- [ ] 分支合并
- [ ] 其他

### 🔗 相关 Issue

<!--
1. 描述相关需求的来源，如相关的 issue 讨论链接。
-->

### 💡 需求背景和解决方案

<!--
1. 要解决的具体问题。
2. 列出最终的 API 实现和用法。
3. 涉及UI/交互变动需要有截图或 GIF。
-->

### 📝 更新日志

<!--
从用户角度描述具体变化，以及可能的 breaking change 和其他风险。
-->

- fix(Popup): 修复弹出层内容无法滚动的问题 

- [ ] 本条 PR 不需要纳入 Changelog

### ☑️ 请求合并前的自查清单

⚠️ 请自检并全部**勾选全部选项**。⚠️

- [ ] 文档已补充或无须补充
- [ ] 代码演示已提供或无须提供
- [ ] TypeScript 定义已补充或无须补充
- [ ] Changelog 已提供或无须提供


github-actions[bot]: [<img height="96" alt="失败" src="https://user-images.githubusercontent.com/5378891/75333447-1e63a280-58c1-11ea-975d-235367fd1522.png">](https://github.com/Tencent/tdesign-mobile-vue/actions/runs/5207040177)
<!-- AUTO_PREVIEW_HOOK -->
github-actions[bot]: **Size Change:** -37 B (0%) 

**Total Size:** 470 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 276 kB | -23 B (0%) |
| `./dist/tdesign.min.js` | 133 kB | -14 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/tdesign.css` | 35.1 kB |
| `./dist/tdesign.min.css` | 25.5 kB |

</details>


github-actions[bot]: **Size Change:** -37 B (0%) 

**Total Size:** 470 kB

| Filename | Size | Change |
| :--- | :---: | :---: |
| `./dist/tdesign.js` | 276 kB | -23 B (0%) |
| `./dist/tdesign.min.js` | 133 kB | -14 B (0%) |

<details><summary>ℹ️ <strong>View Unchanged</strong></summary>

| Filename | Size |
| :--- | :---: |
| `./dist/tdesign.css` | 35.1 kB |
| `./dist/tdesign.min.css` | 25.5 kB |

</details>



Patch:
diff --git a/src/overlay/overlay.md b/src/overlay/overlay.md
index c45a218d..d56eefd8 100644
--- a/src/overlay/overlay.md
+++ b/src/overlay/overlay.md
@@ -8,7 +8,7 @@
 backgroundColor | String | - | 遮罩层的背景色	 | N
 customStyle | String | - | 遮罩层自定义样式。优先级低于其他属性 | N
 duration | Number | 300 | 背景色过渡时间，单位毫秒 | N
-preventScrollThrough | Boolean | true | 防止滚动穿透，即不允许点击和滚动 | N
+preventScrollThrough | Boolean | true | 是否阻止背景滚动，阻止时蒙层里的内容也将无法滚动 | N
 visible | Boolean | false | 是否展示 | N
 zIndex | Number | 1000 | 遮罩的层级 | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>遮罩层的点击事件 | N
diff --git a/src/popup/popup.md b/src/popup/popup.md
index b6af4411..b3973965 100644
--- a/src/popup/popup.md
+++ b/src/popup/popup.md
@@ -11,7 +11,7 @@ closeOnOverlayClick | Boolean | true | 点击遮罩层是否关闭 | N
 destroyOnClose | Boolean | false | 是否在关闭浮层时销毁浮层 | N
 overlayProps | Object | {} | 遮罩层的属性，透传至 overlay | N
 placement | String | top | 浮层出现位置。可选项：top/left/right/bottom/center | N
-preventScrollThrough | Boolean | true | 防止滚动穿透 | N
+preventScrollThrough | Boolean | true | 是否阻止背景滚动 | N
 showOverlay | Boolean | true | 是否显示遮罩层 | N
 transitionName | String | - | 弹出层内容区的动画名，等价于transition组件的name属性 | N
 visible | Boolean | - | 是否显示浮层。支持语法糖 `v-model` 或 `v-model:visible`。TS 类型：`boolean` | N
diff --git a/src/popup/popup.vue b/src/popup/popup.vue
index f674dd20..617d2ae3 100644
--- a/src/popup/popup.vue
+++ b/src/popup/popup.vue
@@ -2,12 +2,7 @@
   <teleport v-if="!destroyOnClose || wrapperVisbile" :to="to" :disabled="!to">
     <t-overlay v-bind="overlayProps" :visible="innerVisible && showOverlay" @click="handleOverlayClick" />
     <transition :name="contentTransitionName" @after-enter="afterEnter" @after-leave="afterLeave">
-      <div
-        v-show="innerVisible"
-        :class="[name, $attrs.class, contentClasses]"
-        :style="rootStyles"
-        @touchmove="handleMove"
-      >
+      <div v-show="innerVisible" :class="[name, $attrs.class, contentClasses]" :style="rootStyles">
         <div v-if="closeBtnNode" :class="`${name}__close`" @click="handleCloseClick">
           <t-node :content="closeBtnNode" />
         </div>
@@ -107,12 +102,6 @@ export default defineComponent({
       setVisible(false);
     };
 
-    const handleMove = (e: TouchEvent) => {
-      if (props.preventScrollThrough) {
-        e.preventDefault();
-      }
-    };
-
     const afterLeave = () => {
       wrapperVisbile.value = false;
       emitEvent('closed');
@@ -161,7 +150,6 @@ export default defineComponent({
       afterLeave,
       handleOverlayClick,
       handleCloseClick,
-      handleMove,
     };
   },
 });


Test patch:
diff --git a/src/popup/__test__/index.test.jsx b/src/popup/__test__/index.test.jsx
index 7a31757c..d3ebe196 100644
--- a/src/popup/__test__/index.test.jsx
+++ b/src/popup/__test__/index.test.jsx
@@ -142,12 +142,6 @@ describe('popup', () => {
       expect($transition.at(0).exists()).toBeTruthy();
       expect($transition.at(1).exists()).toBeTruthy();
 
-      const event = {
-        preventDefault: vi.fn(),
-      };
-      await $popup.trigger('touchmove', event);
-      expect(event.preventDefault).toHaveBeenCalledTimes(1);
-
       // 理论上点击遮罩层，可以触发 transition 的 after-leave 事件，但在测试环境中并没有触发。
       // 手动触发 afterLeave
       wrapper.findComponent(Popup).vm.afterLeave();