fix(popup): 增加底部iphonex适配(#1009)

src/packages/__VUE/actionsheet/doc.md

@@ -1,6 +1,5 @@
 # ActionSheet 动作面板
 
-
 ### 介绍
 从底部弹出的动作菜单面板。
 
@@ -275,7 +274,6 @@ export default {
 | description      | 设置列表项副标题/描述                  | String  | ''        |
 | cancel-txt       | 取消文案                               | String  | '取消'   |
 | close-abled      | 遮罩层是否可关闭                       | Boolean | true      |
-|safe-area-inset-bottom	|是否开启iphone系列全面屏底部安全区适配|	Boolean	|false
 
 ## menu-items数据结构
 

src/packages/__VUE/actionsheet/index.scss

@@ -1,9 +1,5 @@
 .nut-actionsheet-panel {
   display: block;
-  &.nut-actionsheet-safebottom {
-    margin-bottom: constant(safe-area-inset-bottom);
-    margin-bottom: env(safe-area-inset-bottom);
-  }
   .nut-actionsheet-title {
     display: block;
     padding: 10px;

src/packages/__VUE/actionsheet/index.taro.vue

@@ -1,7 +1,7 @@
 <template>
   <view :class="classes">
     <nut-popup pop-class="popclass" :visible="visible" position="bottom" round @click-overlay="close">
-      <view class="nut-actionsheet-panel" :class="{ 'nut-actionsheet-safebottom': safeAreaInsetBottom }">
+      <view class="nut-actionsheet-panel">
         <view v-if="title" class="nut-actionsheet-title">{{ title }}</view>
         <slot></slot>
         <view v-if="!slotDefault">
@@ -67,10 +67,6 @@ export default create({
     menuItems: {
       type: Array,
       default: () => []
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['cancel', 'choose', 'update:visible', 'close'],

src/packages/__VUE/actionsheet/index.vue

@@ -8,7 +8,7 @@
       round
       @click-overlay="close"
     >
-      <view class="nut-actionsheet-panel" :class="{ 'nut-actionsheet-safebottom': safeAreaInsetBottom }">
+      <view class="nut-actionsheet-panel">
         <view v-if="title" class="nut-actionsheet-title">{{ title }}</view>
         <slot></slot>
         <view v-if="!slotDefault">
@@ -78,10 +78,6 @@ export default create({
     isWrapTeleport: {
       type: Boolean,
       default: true
-    },
-    safeAreaInsetBottom: {
-      type: Boolean,
-      default: false
     }
   },
   emits: ['cancel', 'close', 'choose', 'update:visible'],

src/packages/__VUE/popup/doc.md

@@ -186,6 +186,7 @@ app.use(Popup).use(OverLay)
 | destroy-on-close       | 弹层关闭后 `slot`内容会不会清空                                          | Boolean        | `true`        |
 | round                  | 是否显示圆角                                                | Boolean        | `false`       |
 | teleport               | 指定挂载节点(`小程序不支持`)                                                | String         | `"body"`      |
+| safe-area-inset-bottom `v3.1.19`	| 是否开启 iphone 系列全面屏底部安全区适配,仅当 `position` 为 `bottom` 时有效 |	Boolean	|`false`     |
 
 ### Events
 

src/packages/__VUE/popup/index.scss

@@ -46,6 +46,10 @@
   &.round {
     border-radius: $popup-border-radius $popup-border-radius 0 0;
   }
+  &--safebottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }
 
 .popup-right {

src/packages/__VUE/popup/index.taro.vue

@@ -89,6 +89,10 @@ export const popupProps = {
   round: {
     type: Boolean,
     default: false
+  },
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: false
   }
 };
 export default create({
@@ -117,6 +121,7 @@ export default create({
         [prefixCls]: true,
         ['round']: props.round,
         [`popup-${props.position}`]: true,
+        [`popup-${props.position}--safebottom`]: props.position === 'bottom' && props.safeAreaInsetBottom,
         [props.popClass]: true
       };
     });

src/packages/__VUE/popup/index.vue

@@ -131,6 +131,10 @@ export const popupProps = {
   isWrapTeleport: {
     type: Boolean,
     default: true
+  },
+  safeAreaInsetBottom: {
+    type: Boolean,
+    default: false
   }
 };
 export default create({
@@ -161,6 +165,7 @@ export default create({
         [prefixCls]: true,
         ['round']: props.round,
         [`popup-${props.position}`]: true,
+        [`popup-${props.position}--safebottom`]: props.position === 'bottom' && props.safeAreaInsetBottom,
         [props.popClass]: true
       };
     });