feat(Popup): add safe-area-inset-bottom prop (#4419)

src/action-sheet/index.less

@@ -56,9 +56,4 @@
     font-size: @action-sheet-close-icon-size;
     line-height: inherit;
   }
-
-  &--safe-area-inset-bottom {
-    padding-bottom: constant(safe-area-inset-bottom);
-    padding-bottom: env(safe-area-inset-bottom);
-  }
 }

src/action-sheet/index.tsx

@@ -118,7 +118,7 @@ function ActionSheet(
 
   return (
     <Popup
-      class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
+      class={bem()}
       position="bottom"
       round={props.round}
       value={props.value}
@@ -128,6 +128,7 @@ function ActionSheet(
       lockScroll={props.lockScroll}
       getContainer={props.getContainer}
       closeOnClickOverlay={props.closeOnClickOverlay}
+      safeAreaInsetBottom={props.safeAreaInsetBottom}
       {...inherit(ctx, true)}
     >
       {Header()}

src/popup/README.md

@@ -134,7 +134,7 @@ export default {
 | close-icon | Close icon name | *string* | `cross` | 2.2.0 |
 | transition | Transition | *string* | `popup-slide` | - |
 | get-container | Return the mount node for Popup | *string \| () => HTMLElement* | - | - |
-
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | 2.2.1 |
 
 ### Events
 

src/popup/README.zh-CN.md

@@ -145,6 +145,7 @@ export default {
 | close-icon | 关闭图标名称或图片链接 | *string* | `cross` | 2.2.0 |
 | transition | 动画类名，用法与 Vue 原生`transtion`组件的`name`属性一致 | *string* | - | - |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
+| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | 2.2.1 |
 
 ### Events
 

src/popup/index.js

@@ -12,6 +12,7 @@ export default createComponent({
     duration: Number,
     closeable: Boolean,
     transition: String,
+    safeAreaInsetBottom: Boolean,
     closeIcon: {
       type: String,
       default: 'cross'
@@ -63,7 +64,11 @@ export default createComponent({
         <div
           vShow={this.value}
           style={style}
-          class={bem({ round, [position]: position })}
+          class={bem({
+            round,
+            [position]: position,
+            'safe-area-inset-bottom': this.safeAreaInsetBottom
+          })}
           onClick={this.onClick}
         >
           {this.slots()}

src/popup/index.less

@@ -63,6 +63,11 @@
       }
     }
 
+    &--safe-area-inset-bottom {
+      padding-bottom: constant(safe-area-inset-bottom);
+      padding-bottom: env(safe-area-inset-bottom);
+    }
+
     &-slide-top-enter,
     &-slide-top-leave-active {
       transform: translate3d(0, -100%, 0);