From f05db09646b28f980e3e8fb1cf81d3d93489e3c9 Mon Sep 17 00:00:00 2001
From: landluck <landl_ww@163.com>
Date: Mon, 13 Feb 2023 09:26:21 +0800
Subject: [PATCH] feat(popup): add safe-area-tab-bar props support (#5194)

---
 packages/popup/README.md  | 1 +
 packages/popup/index.less | 4 ++++
 packages/popup/index.ts   | 4 ++++
 packages/popup/index.wxml | 2 +-
 4 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/popup/README.md b/packages/popup/README.md
index 267e766e..2fdb425d 100644
--- a/packages/popup/README.md
+++ b/packages/popup/README.md
@@ -139,6 +139,7 @@ Page({
 | close-icon | 关闭图标名称或图片链接 | _string_ | `cross` |
 | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` |
 | safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `false` |
+| safe-area-tab-bar | 是否留出底部 tabbar 安全距离（在使用 tabbar 组件 & 小程序自定义 tabbar 时，popup 组件层级无法盖住 tabbar） | _boolean_ | `false` |
 | lock-scroll `v1.7.3` | 是否锁定背景滚动 | _boolean_ | `true` |
 
 ### Events
diff --git a/packages/popup/index.less b/packages/popup/index.less
index 40688957..2181a103 100644
--- a/packages/popup/index.less
+++ b/packages/popup/index.less
@@ -101,6 +101,10 @@
     padding-bottom: env(safe-area-inset-bottom);
   }
 
+  &--bottom&--safeTabBar {
+    bottom: var(--tabbar-height, @tabbar-height);
+  }
+
   &--safeTop {
     padding-top: constant(safe-area-inset-top);
     padding-top: env(safe-area-inset-top);
diff --git a/packages/popup/index.ts b/packages/popup/index.ts
index a921bae0..fef1f49b 100644
--- a/packages/popup/index.ts
+++ b/packages/popup/index.ts
@@ -56,6 +56,10 @@ VantComponent({
       type: Boolean,
       value: false,
     },
+    safeAreaTabBar: {
+      type: Boolean,
+      value: false,
+    },
     lockScroll: {
       type: Boolean,
       value: true,
diff --git a/packages/popup/index.wxml b/packages/popup/index.wxml
index ea7d696b..fad03082 100644
--- a/packages/popup/index.wxml
+++ b/packages/popup/index.wxml
@@ -12,7 +12,7 @@
 />
 <view
   wx:if="{{ inited }}"
-  class="custom-class {{ classes }} {{ utils.bem('popup', [position, { round, safe: safeAreaInsetBottom, safeTop: safeAreaInsetTop }]) }}"
+  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"
 >