feat(Overlay): add lazy-render prop (#10180)

packages/vant/src/overlay/Overlay.tsx

@@ -26,6 +26,7 @@ const overlayProps = {
   duration: numericProp,
   className: unknownProp,
   lockScroll: truthProp,
+  lazyRender: truthProp,
   customStyle: Object as PropType<CSSProperties>,
 };
 
@@ -37,7 +38,7 @@ export default defineComponent({
   props: overlayProps,
 
   setup(props, { slots }) {
-    const lazyRender = useLazyRender(() => props.show);
+    const lazyRender = useLazyRender(() => props.show || !props.lazyRender);
 
     const preventTouchMove = (event: TouchEvent) => {
       preventDefault(event, true);

packages/vant/src/overlay/README.md

@@ -73,6 +73,7 @@ export default {
 | class-name | ClassName | _string_ | - |
 | custom-class | Custom style | _object_ | - |
 | lock-scroll | Whether to lock background scroll | _boolean_ | `true` |
+| lazy-render `v3.4.2` | Whether to lazy render util appeared | _boolean_ | `true` |
 
 ### Events
 

packages/vant/src/overlay/README.zh-CN.md

@@ -75,6 +75,7 @@ export default {
 | class-name | 自定义类名 | _string_ | - |
 | custom-style | 自定义样式 | _object_ | - |
 | lock-scroll | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | _boolean_ | `true` |
+| lazy-render `v3.4.2` | 是否在显示时才渲染节点 | _boolean_ | `true` |
 
 ### Events
 

packages/vant/src/overlay/test/__snapshots__/index.spec.tsx.snap

@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should allow to disable lazy-render 1`] = `
+<transition-stub>
+  <div class="van-overlay"
+       style="display: none;"
+  >
+  </div>
+</transition-stub>
+`;
+
 exports[`should render default slot correctly 1`] = `
 <transition-stub>
 </transition-stub>

packages/vant/src/overlay/test/index.spec.tsx

@@ -94,3 +94,13 @@ test('should not allow to touchmove when lock-scroll is true', async () => {
   overlay.trigger('touchmove');
   expect(onTouchMove).toHaveBeenCalledTimes(0);
 });
+
+test('should allow to disable lazy-render', async () => {
+  const wrapper = mount({
+    render() {
+      return <Overlay lazyRender={false} />;
+    },
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});