feat(Tabbar): enable safe-area-inset-bottom by default when fixed (#5968)

src/tabbar/README.zh-CN.md

@@ -170,7 +170,7 @@ export default {
 | active-color | 选中标签的颜色 | *string* | `#1989fa` |
 | inactive-color | 未选中标签的颜色 | *string* | `#7d7e80` |
 | route | 是否开启路由模式 | *boolean* | `false` |
-| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` |
+| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei)，设置 fixed 时默认开启 | *boolean* | `false` |
 
 ### Tabbar Events
 

src/tabbar/demo/index.vue

@@ -127,6 +127,7 @@ export default {
 .demo-tabbar {
   .van-tabbar {
     position: relative;
+    padding-bottom: 0;
   }
 }
 </style>

src/tabbar/index.js

@@ -12,7 +12,6 @@ export default createComponent({
     zIndex: [Number, String],
     activeColor: String,
     inactiveColor: String,
-    safeAreaInsetBottom: Boolean,
     value: {
       type: [Number, String],
       default: 0,
@@ -25,6 +24,20 @@ export default createComponent({
       type: Boolean,
       default: true,
     },
+    safeAreaInsetBottom: {
+      type: Boolean,
+      default: null,
+    },
+  },
+
+  computed: {
+    fit() {
+      if (this.safeAreaInsetBottom !== null) {
+        return this.safeAreaInsetBottom;
+      }
+      // enable safe-area-inset-bottom by default when fixed
+      return this.fixed;
+    },
   },
 
   watch: {
@@ -54,8 +67,8 @@ export default createComponent({
         class={[
           { [BORDER_TOP_BOTTOM]: this.border },
           bem({
+            unfit: !this.fit,
             fixed: this.fixed,
-            'safe-area-inset-bottom': this.safeAreaInsetBottom,
           }),
         ]}
       >

src/tabbar/index.less

@@ -6,6 +6,8 @@
   box-sizing: content-box;
   width: 100%;
   height: @tabbar-height;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
   background-color: @tabbar-background-color;
 
   &--fixed {
@@ -14,8 +16,7 @@
     left: 0;
   }
 
-  &--safe-area-inset-bottom {
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
+  &--unfit {
+    padding-bottom: 0;
   }
 }