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

src/calendar/index.js

@@ -383,11 +383,7 @@ export default createComponent({
 
     genFooter() {
       return (
-        <div
+        <div class={bem('footer', { unfit: !this.safeAreaInsetBottom })}>
-          class={bem('footer', {
-            'safe-area-inset-bottom': this.safeAreaInsetBottom,
-          })}
-        >
           {this.genFooterContent()}
         </div>
       );

src/calendar/index.less

@@ -173,10 +173,11 @@
   &__footer {
     flex-shrink: 0;
     padding: 0 @padding-md;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
 
-    &--safe-area-inset-bottom {
+    &--unfit {
-      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: 0;
-      padding-bottom: env(safe-area-inset-bottom);
     }
   }
 

src/calendar/test/__snapshots__/demo.spec.js.snap

@@ -171,7 +171,7 @@ exports[`renders demo correctly 1`] = `
           </div>
         </div>
       </div>
-      <div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"></div>
+      <div class="van-calendar__footer"></div>
     </div>
   </div>
   <!---->

src/calendar/test/__snapshots__/index.spec.js.snap

@@ -47,7 +47,7 @@ exports[`color prop when type is range 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
 </div>
 `;
 
@@ -98,7 +98,7 @@ exports[`color prop when type is single 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm" style="color: rgb(255, 255, 255); background: blue; border-color: blue;"><span class="van-button__text">确定</span></button></div>
 </div>
 `;
 
@@ -152,7 +152,7 @@ exports[`formatter prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
 </div>
 `;
 
@@ -206,7 +206,7 @@ exports[`popup wrapper 2`] = `
         </div>
       </div>
     </div>
-    <div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
+    <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
   </div><i role="button" tabindex="0" class="van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right">
     <!----></i>
 </div>
@@ -259,7 +259,7 @@ exports[`row-height prop 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
+  <div class="van-calendar__footer"><button type="button" class="van-button van-button--danger van-button--normal van-button--block van-button--round van-calendar__confirm"><span class="van-button__text">确定</span></button></div>
 </div>
 `;
 
@@ -310,6 +310,6 @@ exports[`title & footer slot 1`] = `
       </div>
     </div>
   </div>
-  <div class="van-calendar__footer van-calendar__footer--safe-area-inset-bottom">Custom Footer</div>
+  <div class="van-calendar__footer">Custom Footer</div>
 </div>
 `;

src/number-keyboard/index.js

@@ -211,10 +211,7 @@ export default createComponent({
         <div
           vShow={this.show}
           style={{ zIndex: this.zIndex }}
-          class={bem([
+          class={bem([this.theme, { unfit: !this.safeAreaInsetBottom }])}
-            this.theme,
-            { 'safe-area-inset-bottom': this.safeAreaInsetBottom },
-          ])}
           onTouchstart={stopPropagation}
           onAnimationend={this.onAnimationEnd}
           onWebkitAnimationEnd={this.onAnimationEnd}

src/number-keyboard/index.less

@@ -6,6 +6,8 @@
   left: 0;
   z-index: @number-keyboard-z-index;
   width: 100%;
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
   background-color: @number-keyboard-background-color;
   user-select: none;
 
@@ -57,9 +59,8 @@
     }
   }
 
-  &--safe-area-inset-bottom {
+  &--unfit {
-    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: 0;
-    padding-bottom: env(safe-area-inset-bottom);
   }
 }
 

src/number-keyboard/test/__snapshots__/demo.spec.js.snap

@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
       弹出默认键盘
     </span></button>
-    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" name="van-slide-up">
+    <div class="van-number-keyboard van-number-keyboard--default" name="van-slide-up">
       <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
@@ -13,7 +13,7 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
       弹出自定义键盘
     </span></button>
-    <div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+    <div class="van-number-keyboard van-number-keyboard--custom" style="display: none;" name="van-slide-up">
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--middle">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--extra">.</i>
         <div class="van-number-keyboard__sidebar"><i role="button" tabindex="0" class="van-hairline van-key van-key--delete van-key--big van-key--gray van-key--delete">删除</i><i role="button" tabindex="0" class="van-hairline van-key van-key--blue van-key--big van-key--close">完成</i></div>
       </div>
@@ -25,14 +25,14 @@ exports[`renders demo correctly 1`] = `
         <div class="van-field__body"><input type="text" readonly="readonly" placeholder="点此输入" class="van-field__control"></div>
       </div>
     </div>
-    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+    <div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
   <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">
       弹出身份证号码键盘
     </span></button>
-    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+    <div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
       <div class="van-number-keyboard__title van-hairline--top"><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">X</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
@@ -40,7 +40,7 @@ exports[`renders demo correctly 1`] = `
   <div><button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">
       弹出自定义标题键盘
     </span></button>
-    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+    <div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
       <div class="van-number-keyboard__title van-hairline--top"><span>键盘标题</span><span role="button" tabindex="0" class="van-number-keyboard__close">完成</span></div>
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>

src/number-keyboard/test/__snapshots__/index.spec.js.snap

@@ -1,50 +1,50 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`extra-key slot 1`] = `
-<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra">Custom Extra Key</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>
 `;
 
 exports[`focus on key 1`] = `
-<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>
 `;
 
 exports[`focus on key 2`] = `
-<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>
 `;
 
 exports[`move and blur key 1`] = `
-<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>
 `;
 
 exports[`move and blur key 2`] = `
-<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key van-key--active">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>
 `;
 
 exports[`move and blur key 3`] = `
-<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>
 `;
 
 exports[`render title 1`] = `
-<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__title van-hairline--top"><span>Title</span><span role="button" tabindex="0" class="van-number-keyboard__close">Close</span></div>
   <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>
 `;
 
 exports[`title-left slot 1`] = `
-<div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" style="display: none;" name="van-slide-up">
+<div class="van-number-keyboard van-number-keyboard--default" style="display: none;" name="van-slide-up">
   <div class="van-number-keyboard__title van-hairline--top"><span class="van-number-keyboard__title-left">Custom Title Left</span></div>
   <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
 </div>

src/password-input/test/__snapshots__/demo.spec.js.snap

@@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
       </ul>
       <div class="van-password-input__info">密码为 6 位数字</div>
     </div>
-    <div class="van-number-keyboard van-number-keyboard--default van-number-keyboard--safe-area-inset-bottom" name="van-slide-up">
+    <div class="van-number-keyboard van-number-keyboard--default" name="van-slide-up">
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--extra"></i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>

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 {
+  &--unfit {
-    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: 0;
-    padding-bottom: env(safe-area-inset-bottom);
   }
 }