[new feature] SubmitBar: add safe-area-inset-bottom prop (#3172)

packages/submit-bar/en-US.md

@@ -73,6 +73,7 @@ Use slot to add custom contents.
 | loading | Whether to show loading icon |  `Boolean` | `false` |
 | currency | Currency symbol |  `String` | `¥` |
 | decimal-length | Number of digits to appear after the decimal point | `Number` | `2` |
+| 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` |
 
 ### Event
 

packages/submit-bar/index.less

@@ -7,6 +7,7 @@
   z-index: 100;
   position: fixed;
   user-select: none;
+  background-color: @white;
 
   &__tip {
     color: #f56723;
@@ -21,7 +22,6 @@
     display: flex;
     font-size: 14px;
     align-items: center;
-    background-color: @white;
   }
 
   &__text {
@@ -48,4 +48,9 @@
   .van-button {
     width: 110px;
   }
+
+  &--safe-area-inset-bottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }

packages/submit-bar/index.tsx

@@ -16,6 +16,7 @@ export type SubmitBarProps = {
   buttonType: ButtonType;
   buttonText?: string;
   decimalLength: number;
+  safeAreaInsetBottom?: boolean;
 };
 
 export type SubmitBarSlots = DefaultSlots & {
@@ -35,7 +36,10 @@ function SubmitBar(
   const hasPrice = typeof price === 'number';
 
   return (
-    <div class={bem()} {...inherit(ctx)}>
+    <div
+      class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })}
+      {...inherit(ctx)}
+    >
       {slots.top && slots.top()}
       {(slots.tip || tip) && (
         <div class={bem('tip')}>
@@ -75,6 +79,7 @@ SubmitBar.props = {
   loading: Boolean,
   disabled: Boolean,
   buttonText: String,
+  safeAreaInsetBottom: Boolean,
   price: {
     type: Number,
     default: null

packages/submit-bar/zh-CN.md

@@ -76,6 +76,7 @@ Vue.use(SubmitBar);
 | loading | 是否显示加载中的按钮 |  `Boolean` | `false` | - |
 | currency | 货币符号 | `String` | `¥` | 1.0.6 |
 | decimal-length | 价格小数点后位数 | `Number` | `2` | 1.6.15 | 
+| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
 
 ### Event