feat(Overlay): add lock-scroll prop (#6082)

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
 

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
 

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);

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);
+});