feat(dropdown-menu): add safe-area-tab-bar prop support (#5257)

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

packages/dropdown-item/index.ts

@@ -45,6 +45,7 @@ VantComponent({
     showPopup: false,
     showWrapper: false,
     displayTitle: '',
+    safeAreaTabBar: false,
   },
 
   methods: {
@@ -62,6 +63,7 @@ VantComponent({
           activeColor,
           closeOnClickOverlay,
           direction,
+          safeAreaTabBar,
         } = this.parent.data;
 
         this.setData({
@@ -70,6 +72,7 @@ VantComponent({
           activeColor,
           closeOnClickOverlay,
           direction,
+          safeAreaTabBar,
         });
       }
     },

packages/dropdown-item/index.wxml

@@ -12,6 +12,7 @@
     overlay="{{ overlay }}"
     position="{{ direction === 'down' ? 'top' : 'bottom' }}"
     duration="{{ transition ? duration : 0 }}"
+    safe-area-tab-bar="{{ safeAreaTabBar }}"
     close-on-click-overlay="{{ closeOnClickOverlay }}"
     rootPortal="{{ rootPortal }}"
     bind:enter="onOpen"

packages/dropdown-menu/README.md

@@ -182,6 +182,7 @@ Page({
 | duration | 动画时长，单位毫秒 | _number_ | `200` |
 | direction | 菜单展开方向，可选值为 up | _string_ | `down` |
 | overlay | 是否显示遮罩层 | _boolean_ | `true` |
+| safe-area-tab-bar `v1.10.14`| 是否留出底部 tabbar 安全距离 | _boolean_ | `false` |
 | close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | _boolean_ | `true` |
 | close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | _boolean_ | `true` |
 

packages/dropdown-menu/index.ts

@@ -36,6 +36,10 @@ VantComponent({
       value: 'down',
       observer: 'updateChildrenData',
     },
+    safeAreaTabBar: {
+      type: Boolean,
+      value: false,
+    },
     closeOnClickOverlay: {
       type: Boolean,
       value: true,

packages/popup/index.less

@@ -101,7 +101,8 @@
     padding-bottom: env(safe-area-inset-bottom);
   }
 
-  &--bottom&--safeTabBar {
+  &--bottom&--safeTabBar,
+  &--top&--safeTabBar {
     bottom: var(--tabbar-height, @tabbar-height);
   }