From 8f3baa3449a407e8eb74a848abba136982e37fe7 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 18 Apr 2020 08:33:41 +0800
Subject: [PATCH] feat(Overlay): add lock-scroll prop (#6082)

---
 src/overlay/README.md          |  1 +
 src/overlay/README.zh-CN.md    | 15 ++++++++-------
 src/overlay/index.tsx          | 11 ++++++++---
 src/overlay/test/index.spec.js | 26 ++++++++++++++++++++++++++
 4 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/src/overlay/README.md b/src/overlay/README.md
index fa57a9771..31fba67b1 100644
--- a/src/overlay/README.md
+++ b/src/overlay/README.md
@@ -64,6 +64,7 @@ export default {
 | duration | Animation duration | _number \| string_ | `0.3` |
 | class-name | ClassName | _string_ | - |
 | custom-class `v2.2.5` | Custom style | _object_ | - |
+| lock-scroll `v2.6.2` | Whether to lock background scroll | _boolean_ | `true` |
 
 ### Events
 
diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md
index b8ce2bc2c..9d70faa1b 100644
--- a/src/overlay/README.zh-CN.md
+++ b/src/overlay/README.zh-CN.md
@@ -63,13 +63,14 @@ export default {
 
 ### Props
 
-| 参数                  | 说明             | 类型               | 默认值  |
-| --------------------- | ---------------- | ------------------ | ------- |
-| show                  | 是否展示遮罩层   | _boolean_          | `false` |
-| z-index               | z-index 层级     | _number \| string_ | `1`     |
-| duration              | 动画时长，单位秒 | _number \| string_ | `0.3`   |
-| class-name            | 自定义类名       | _string_           | -       |
-| custom-style `v2.2.5` | 自定义样式       | _object_           | -       |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| show | 是否展示遮罩层 | _boolean_ | `false` |
+| z-index | z-index 层级 | _number \| string_ | `1` |
+| duration | 动画时长，单位秒 | _number \| string_ | `0.3` |
+| class-name | 自定义类名 | _string_ | - |
+| custom-style `v2.2.5` | 自定义样式 | _object_ | - |
+| lock-scroll `v2.6.2` | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | _boolean_ | `true` |
 
 ### Events
 
diff --git a/src/overlay/index.tsx b/src/overlay/index.tsx
index 8fc0ae38e..070d47942 100644
--- a/src/overlay/index.tsx
+++ b/src/overlay/index.tsx
@@ -1,5 +1,5 @@
 // Utils
-import { createNamespace, isDef } from '../utils';
+import { createNamespace, isDef, noop } from '../utils';
 import { inherit } from '../utils/functional';
 import { preventDefault } from '../utils/dom/event';
 
@@ -12,6 +12,7 @@ export type OverlayProps = {
   zIndex?: number | string;
   duration: number | string | null;
   className?: any;
+  lockScroll?: boolean;
   customStyle?: object;
 };
 
@@ -46,10 +47,10 @@ function Overlay(
         vShow={props.show}
         style={style}
         class={[bem(), props.className]}
-        onTouchmove={preventTouchMove}
+        onTouchmove={props.lockScroll ? preventTouchMove : noop}
         {...inherit(ctx, true)}
       >
-        {slots.default && slots.default()}
+        {slots.default?.()}
       </div>
     </transition>
   );
@@ -61,6 +62,10 @@ Overlay.props = {
   duration: [Number, String],
   className: null as any,
   customStyle: Object,
+  lockScroll: {
+    type: Boolean,
+    default: true,
+  },
 };
 
 export default createComponent<OverlayProps, OverlayEvents>(Overlay);
diff --git a/src/overlay/test/index.spec.js b/src/overlay/test/index.spec.js
index a1193daf2..093aa569c 100644
--- a/src/overlay/test/index.spec.js
+++ b/src/overlay/test/index.spec.js
@@ -70,3 +70,29 @@ test('default slot', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('lock-scroll prop', () => {
+  const onTouchMove = jest.fn();
+  const wrapper = mount({
+    template: `
+      <div @touchmove="onTouchMove">
+        <van-overlay :lock-scroll="lockScroll" />
+      </div>
+    `,
+    data() {
+      return {
+        lockScroll: true,
+      };
+    },
+    methods: {
+      onTouchMove,
+    },
+  });
+
+  wrapper.find('.van-overlay').trigger('touchmove');
+  expect(onTouchMove).toHaveBeenCalledTimes(0);
+
+  wrapper.setData({ lockScroll: false });
+  wrapper.find('.van-overlay').trigger('touchmove');
+  expect(onTouchMove).toHaveBeenCalledTimes(1);
+});