feat(popup): add root-portal prop support (#5254)

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

* fix(popup): fix test case error

---------

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

packages/action-sheet/test/__snapshots__/demo.spec.ts.snap

@@ -55,6 +55,7 @@ exports[`should render demo and match snapshot 1`] = `
           bind:close="onClickOverlay"
         >
           <van-overlay
+            rootPortal="{{false}}"
             bind:click="onClickOverlay"
           >
             <van-transition
@@ -120,6 +121,7 @@ exports[`should render demo and match snapshot 1`] = `
           bind:close="onClickOverlay"
         >
           <van-overlay
+            rootPortal="{{false}}"
             bind:click="onClickOverlay"
           >
             <van-transition
@@ -185,6 +187,7 @@ exports[`should render demo and match snapshot 1`] = `
           bind:close="onClickOverlay"
         >
           <van-overlay
+            rootPortal="{{false}}"
             bind:click="onClickOverlay"
           >
             <van-transition
@@ -250,6 +253,7 @@ exports[`should render demo and match snapshot 1`] = `
           bind:close="onClickOverlay"
         >
           <van-overlay
+            rootPortal="{{false}}"
             bind:click="onClickOverlay"
           >
             <van-transition
@@ -315,6 +319,7 @@ exports[`should render demo and match snapshot 1`] = `
           bind:close="onClickOverlay"
         >
           <van-overlay
+            rootPortal="{{false}}"
             bind:click="onClickOverlay"
           >
             <van-transition
@@ -381,6 +386,7 @@ exports[`should render demo and match snapshot 1`] = `
           bind:close="onClickOverlay"
         >
           <van-overlay
+            rootPortal="{{false}}"
             bind:click="onClickOverlay"
           >
             <van-transition

packages/calendar/test/__snapshots__/demo.spec.ts.snap

@@ -1709,6 +1709,7 @@ exports[`should render demo and match snapshot 1`] = `
       bind:enter="onOpen"
     >
       <van-overlay
+        rootPortal="{{false}}"
         bind:click="onClickOverlay"
       >
         <van-transition

packages/cascader/test/__snapshots__/demo.spec.ts.snap

@@ -100,6 +100,7 @@ exports[`should render demo and match snapshot 1`] = `
       </van-field>
       <van-popup>
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -209,6 +210,7 @@ exports[`should render demo and match snapshot 1`] = `
       </van-field>
       <van-popup>
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -318,6 +320,7 @@ exports[`should render demo and match snapshot 1`] = `
       </van-field>
       <van-popup>
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -427,6 +430,7 @@ exports[`should render demo and match snapshot 1`] = `
       </van-field>
       <van-popup>
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition

packages/dialog/test/__snapshots__/demo.spec.ts.snap

@@ -268,6 +268,7 @@ exports[`should render demo and match snapshot 1`] = `
       bind:close="onClickOverlay"
     >
       <van-overlay
+        rootPortal="{{false}}"
         bind:click="onClickOverlay"
       >
         <van-transition
@@ -284,6 +285,7 @@ exports[`should render demo and match snapshot 1`] = `
       bind:close="onClickOverlay"
     >
       <van-overlay
+        rootPortal="{{false}}"
         bind:click="onClickOverlay"
       >
         <van-transition

packages/popup/README.md

@@ -141,6 +141,7 @@ Page({
 | safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `false` |
 | safe-area-tab-bar | 是否留出底部 tabbar 安全距离（在使用 tabbar 组件 & 小程序自定义 tabbar 时，popup 组件层级无法盖住 tabbar） | _boolean_ | `false` |
 | lock-scroll `v1.7.3` | 是否锁定背景滚动 | _boolean_ | `true` |
+| root-portal `v1.10.14` | 是否从页面中脱离出来，用于解决各种 fixed 失效问题，微信基础库 >= `2.25.2 ` | _boolean_ | `false` |
 
 ### Events
 

packages/popup/index.ts

@@ -64,6 +64,10 @@ VantComponent({
       type: Boolean,
       value: true,
     },
+    rootPortal: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   created() {

packages/popup/index.wxml

@@ -1,6 +1,8 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 <wxs src="./index.wxs" module="computed" />
 
+<import src="./popup.wxml" />
+
 <van-overlay
   wx:if="{{ overlay }}"
   show="{{ show }}"
@@ -9,18 +11,11 @@
   duration="{{ duration }}"
   bind:click="onClickOverlay"
   lock-scroll="{{ lockScroll }}"
+  root-portal="{{ rootPortal }}"
 />
-<view
+
-  wx:if="{{ inited }}"
+<root-portal wx:if="{{ rootPortal }}">
-  class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safe: safeAreaInsetBottom, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
+  <include src="./popup.wxml" />
-  style="{{ computed.popupStyle({ zIndex, currentDuration, display, customStyle }) }}"
+</root-portal>
-  bind:transitionend="onTransitionEnd"
+
->
+ <include wx:else src="./popup.wxml" />
-  <slot />
-  <van-icon
-    wx:if="{{ closeable }}"
-    name="{{ closeIcon }}"
-    class="close-icon-class van-popup__close-icon van-popup__close-icon--{{ closeIconPosition }}"
-    bind:tap="onClickCloseIcon"
-  />
-</view>

packages/popup/popup.wxml

@@ -0,0 +1,14 @@
+<view
+  wx:if="{{ inited }}"
+  class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safe: safeAreaInsetBottom, safeTop: safeAreaInsetTop, safeTabBar: safeAreaTabBar }]) }}"
+  style="{{ computed.popupStyle({ zIndex, currentDuration, display, customStyle }) }}"
+  bind:transitionend="onTransitionEnd"
+>
+  <slot />
+  <van-icon
+    wx:if="{{ closeable }}"
+    name="{{ closeIcon }}"
+    class="close-icon-class van-popup__close-icon van-popup__close-icon--{{ closeIconPosition }}"
+    bind:tap="onClickCloseIcon"
+  />
+</view>

packages/popup/test/__snapshots__/demo.spec.ts.snap

@@ -46,6 +46,7 @@ exports[`should render demo and match snapshot 1`] = `
         bind:close="hideBasic"
       >
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -194,6 +195,7 @@ exports[`should render demo and match snapshot 1`] = `
         bind:close="hideTop"
       >
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -207,6 +209,7 @@ exports[`should render demo and match snapshot 1`] = `
         bind:close="hideBottom"
       >
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -220,6 +223,7 @@ exports[`should render demo and match snapshot 1`] = `
         bind:close="hideLeft"
       >
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -233,6 +237,7 @@ exports[`should render demo and match snapshot 1`] = `
         bind:close="hideRight"
       >
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -350,6 +355,7 @@ exports[`should render demo and match snapshot 1`] = `
         bind:close="hideCloseIcon"
       >
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -363,6 +369,7 @@ exports[`should render demo and match snapshot 1`] = `
         bind:close="hideCustomCloseIcon"
       >
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -376,6 +383,7 @@ exports[`should render demo and match snapshot 1`] = `
         bind:close="hideCustomIconPosition"
       >
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition
@@ -431,6 +439,7 @@ exports[`should render demo and match snapshot 1`] = `
         bind:close="hideRound"
       >
         <van-overlay
+          rootPortal="{{false}}"
           bind:click="onClickOverlay"
         >
           <van-transition

packages/share-sheet/test/__snapshots__/demo.spec.ts.snap

@@ -56,6 +56,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:close="onClose"
           >
             <van-overlay
+              rootPortal="{{false}}"
               bind:click="onClickOverlay"
             >
               <van-transition
@@ -123,6 +124,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:close="onClose"
           >
             <van-overlay
+              rootPortal="{{false}}"
               bind:click="onClickOverlay"
             >
               <van-transition
@@ -190,6 +192,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:close="onClose"
           >
             <van-overlay
+              rootPortal="{{false}}"
               bind:click="onClickOverlay"
             >
               <van-transition
@@ -257,6 +260,7 @@ exports[`should render demo and match snapshot 1`] = `
             bind:close="onClose"
           >
             <van-overlay
+              rootPortal="{{false}}"
               bind:click="onClickOverlay"
             >
               <van-transition

packages/swipe-cell/test/__snapshots__/demo.spec.ts.snap

@@ -248,6 +248,7 @@ exports[`should render demo and match snapshot 1`] = `
       bind:close="onClickOverlay"
     >
       <van-overlay
+        rootPortal="{{false}}"
         bind:click="onClickOverlay"
       >
         <van-transition

packages/switch/test/__snapshots__/demo.spec.ts.snap

@@ -169,6 +169,7 @@ exports[`should render demo and match snapshot 1`] = `
       bind:close="onClickOverlay"
     >
       <van-overlay
+        rootPortal="{{false}}"
         bind:click="onClickOverlay"
       >
         <van-transition