feat(popup): add safe-area-tab-bar props support (#5194)

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

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);

packages/popup/index.ts

@@ -56,6 +56,10 @@ VantComponent({
       type: Boolean,
       value: false,
     },
+    safeAreaTabBar: {
+      type: Boolean,
+      value: false,
+    },
     lockScroll: {
       type: Boolean,
       value: true,

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"
 >