[new feature] NumberKeyboard: add safe-area-inset-bottom prop (#3173)

packages/number-keyboard/en-US.md

@@ -73,6 +73,7 @@ export default {
 | delete-button-text | Delete button text | `String` | `delete` |
 | show-delete-key | Whether to show delete button | `Boolean` | `true` |
 | hide-on-click-outside | Whether to hide keyboard when click outside | `Boolean` | `true` |
+| 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/number-keyboard/index.js

@@ -12,6 +12,7 @@ export default sfc({
     title: String,
     closeButtonText: String,
     deleteButtonText: String,
+    safeAreaInsetBottom: Boolean,
     theme: {
       type: String,
       default: 'default'
@@ -140,7 +141,7 @@ export default sfc({
         <div
           vShow={this.show}
           style={{ zIndex: this.zIndex }}
-          class={bem([theme])}
+          class={bem([theme, { 'safe-area-inset-bottom': this.safeAreaInsetBottom }])}
           onTouchstart={stop}
           onAnimationend={this.onAnimationEnd}
           onWebkitAnimationEnd={this.onAnimationEnd}

packages/number-keyboard/index.less

@@ -35,8 +35,8 @@
   }
 
   &__sidebar {
+    top: 0;
     right: 0;
-    bottom: 0;
     width: 25%;
     position: absolute;
     height: @number-keyboard-key-height * 4;
@@ -47,6 +47,11 @@
       padding-right: 25%;
     }
   }
+
+  &--safe-area-inset-bottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
 }
 
 .van-key {

packages/number-keyboard/zh-CN.md

@@ -73,6 +73,7 @@ export default {
 | delete-button-text | 删除按钮文字 | `String` | `删除` | 1.4.3 |
 | show-delete-key | 是否展示删除按钮 | `Boolean` | `true` | - |
 | hide-on-click-outside | 点击外部时是否收起键盘 | `Boolean` | `true` | - |
+| safe-area-inset-bottom | 是否开启 iPhone X 底部安全区适配，需要在 `viewport` meta 标签中设置 `viewport-fit=cover` | `Boolean` | `false` | 1.6.15 |
 
 ### Event