[new feature] GoodsAction: add safe-area-inset-bottom prop (#3174)

packages/goods-action/en-US.md

@@ -83,6 +83,11 @@ Use `info` prop to show messages in upper right corner of icon
 
 ### API
 
+#### GoodsAction
+
+| Attribute | Description | Type | Default |
+| safe-area-inset-bottom | Whether to enable bottom safe area adaptation, to enable those features use `viewport-fit=cover` in the `viewport` meta tag | `Boolean` | `false` |
+
 #### GoodsActionMiniBtn
 
 | Attribute | Description | Type | Default |

packages/goods-action/index.less

@@ -6,4 +6,10 @@
   bottom: 0;
   display: flex;
   position: fixed;
+  background-color: @white;
+
+  &--safe-area-inset-bottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }

packages/goods-action/index.tsx

@@ -3,21 +3,32 @@ import { inherit } from '../utils/functional';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultProps, DefaultSlots } from '../utils/use/sfc';
+import { DefaultSlots } from '../utils/use/sfc';
+
+export type GoodsActionProps = {
+  safeAreaInsetBottom?: boolean;
+};
 
 const [sfc, bem] = use('goods-action');
 
 function GoodsAction(
   h: CreateElement,
-  props: DefaultProps,
+  props: GoodsActionProps,
   slots: DefaultSlots,
   ctx: RenderContext
 ) {
   return (
-    <div class={bem()} {...inherit(ctx, true)}>
+    <div
+      class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
+      {...inherit(ctx, true)}
+    >
       {slots.default && slots.default()}
     </div>
   );
 }
 
-export default sfc(GoodsAction);
+GoodsAction.props = {
+  safeAreaInsetBottom: Boolean
+};
+
+export default sfc<GoodsActionProps>(GoodsAction);

packages/goods-action/zh-CN.md

@@ -82,6 +82,12 @@ export default {
 
 ### API
 
+#### GoodsAction
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+|------|------|------|------|------|
+| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
+
 #### GoodsActionMiniBtn
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |