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>
2025-04-05 19:41:45 +08:00 · 2023-02-27 11:23:46 +08:00 · 2023-02-27 11:23:46 +08:00 · 17b9eadcb0
commit 17b9eadcb0
parent 9352b33673
12 changed files with 56 additions and 14 deletions
--- 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
--- 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
--- 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
--- 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
--- 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

--- 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() {
--- 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" />
--- a/packages/popup/popup.wxml
+++ 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>
--- 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
--- 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
--- 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
--- 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