feat(overlay): add root-portal prop support (#5255)

* feat(overlay): add root-portal prop support

* feat(overlay): opt doc style

---------

Co-authored-by: liuhaihonggia <liuhaihong@youzan.com>

packages/overlay/README.md

@@ -94,7 +94,8 @@ Page({
 | duration | 动画时长，单位秒 | _string \| number_ | `0.3` |
 | class-name | 自定义类名 | _string_ | - |
 | custom-style | 自定义样式 | _string_ | - |
-| lock-scroll `v1.7.3` | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | _boolean_ | true |
+| lock-scroll `v1.7.3` | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | _boolean_ | `true` |
+| root-portal `v1.10.14` | 是否从页面中脱离出来，用于解决各种 fixed 失效问题，微信基础库 >= `2.25.2 ` | _boolean_ | `false` |
 
 ### Events
 

packages/overlay/index.ts

@@ -16,6 +16,10 @@ VantComponent({
       type: Boolean,
       value: true,
     },
+    rootPortal: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   methods: {

packages/overlay/index.wxml

@@ -1,21 +1,7 @@
-<van-transition
-  wx:if="{{ lockScroll }}"
-  show="{{ show }}"
-  custom-class="van-overlay custom-class"
-  custom-style="z-index: {{ zIndex }}; {{ customStyle }}"
-  duration="{{ duration }}"
-  bind:tap="onClick"
-  catch:touchmove="noop"
->
-  <slot></slot>
-</van-transition>
-<van-transition
-  wx:else
-  show="{{ show }}"
-  custom-class="van-overlay custom-class"
-  custom-style="z-index: {{ zIndex }}; {{ customStyle }}"
-  duration="{{ duration }}"
-  bind:tap="onClick"
->
-  <slot></slot>
-</van-transition>
+<import src="./overlay.wxml" />
+
+<root-portal wx:if="{{ rootPortal }}">
+  <include src="./overlay.wxml" />
+</root-portal>
+
+<include wx:else src="./overlay.wxml" />

packages/overlay/overlay.wxml

@@ -0,0 +1,10 @@
+<van-transition
+  show="{{ show }}"
+  custom-class="van-overlay custom-class"
+  custom-style="z-index: {{ zIndex }}; {{ customStyle }}"
+  duration="{{ duration }}"
+  bind:tap="onClick"
+  catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
+>
+  <slot></slot>
+</van-transition>