From 17b9eadcb0d87a061c0b1eacd8883df5c8f68620 Mon Sep 17 00:00:00 2001
From: landluck <landl_ww@163.com>
Date: Mon, 27 Feb 2023 11:23:46 +0800
Subject: [PATCH] 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>
---
 .../test/__snapshots__/demo.spec.ts.snap      |  6 +++++
 .../test/__snapshots__/demo.spec.ts.snap      |  1 +
 .../test/__snapshots__/demo.spec.ts.snap      |  4 ++++
 .../test/__snapshots__/demo.spec.ts.snap      |  2 ++
 packages/popup/README.md                      |  1 +
 packages/popup/index.ts                       |  4 ++++
 packages/popup/index.wxml                     | 23 ++++++++-----------
 packages/popup/popup.wxml                     | 14 +++++++++++
 .../test/__snapshots__/demo.spec.ts.snap      |  9 ++++++++
 .../test/__snapshots__/demo.spec.ts.snap      |  4 ++++
 .../test/__snapshots__/demo.spec.ts.snap      |  1 +
 .../test/__snapshots__/demo.spec.ts.snap      |  1 +
 12 files changed, 56 insertions(+), 14 deletions(-)
 create mode 100644 packages/popup/popup.wxml

diff --git a/packages/action-sheet/test/__snapshots__/demo.spec.ts.snap b/packages/action-sheet/test/__snapshots__/demo.spec.ts.snap
index 138de9f7..94db079b 100644
--- a/packages/action-sheet/test/__snapshots__/demo.spec.ts.snap
+++ b/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
diff --git a/packages/calendar/test/__snapshots__/demo.spec.ts.snap b/packages/calendar/test/__snapshots__/demo.spec.ts.snap
index 06fae70e..c1a41de1 100644
--- a/packages/calendar/test/__snapshots__/demo.spec.ts.snap
+++ b/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
diff --git a/packages/cascader/test/__snapshots__/demo.spec.ts.snap b/packages/cascader/test/__snapshots__/demo.spec.ts.snap
index 74ed9507..4ef30c17 100644
--- a/packages/cascader/test/__snapshots__/demo.spec.ts.snap
+++ b/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
diff --git a/packages/dialog/test/__snapshots__/demo.spec.ts.snap b/packages/dialog/test/__snapshots__/demo.spec.ts.snap
index 605986f6..1c9f77c4 100644
--- a/packages/dialog/test/__snapshots__/demo.spec.ts.snap
+++ b/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
diff --git a/packages/popup/README.md b/packages/popup/README.md
index 2fdb425d..c6ff1113 100644
--- a/packages/popup/README.md
+++ b/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
 
diff --git a/packages/popup/index.ts b/packages/popup/index.ts
index fef1f49b..a4b2f71d 100644
--- a/packages/popup/index.ts
+++ b/packages/popup/index.ts
@@ -64,6 +64,10 @@ VantComponent({
       type: Boolean,
       value: true,
     },
+    rootPortal: {
+      type: Boolean,
+      value: false,
+    },
   },
 
   created() {
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
index fad03082..ab824b15 100644
--- a/packages/popup/index.wxml
+++ b/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 }}"
-  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>
+
+<root-portal wx:if="{{ rootPortal }}">
+  <include src="./popup.wxml" />
+</root-portal>
+
+ <include wx:else src="./popup.wxml" />
diff --git a/packages/popup/popup.wxml b/packages/popup/popup.wxml
new file mode 100644
index 00000000..25b57fe1
--- /dev/null
+++ b/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>
diff --git a/packages/popup/test/__snapshots__/demo.spec.ts.snap b/packages/popup/test/__snapshots__/demo.spec.ts.snap
index a56a4456..7f6048de 100644
--- a/packages/popup/test/__snapshots__/demo.spec.ts.snap
+++ b/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
diff --git a/packages/share-sheet/test/__snapshots__/demo.spec.ts.snap b/packages/share-sheet/test/__snapshots__/demo.spec.ts.snap
index 3a32b1dc..b6271e6e 100644
--- a/packages/share-sheet/test/__snapshots__/demo.spec.ts.snap
+++ b/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
diff --git a/packages/swipe-cell/test/__snapshots__/demo.spec.ts.snap b/packages/swipe-cell/test/__snapshots__/demo.spec.ts.snap
index 7b99e9bf..f606abb0 100644
--- a/packages/swipe-cell/test/__snapshots__/demo.spec.ts.snap
+++ b/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
diff --git a/packages/switch/test/__snapshots__/demo.spec.ts.snap b/packages/switch/test/__snapshots__/demo.spec.ts.snap
index 15880239..5a672241 100644
--- a/packages/switch/test/__snapshots__/demo.spec.ts.snap
+++ b/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