blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland 2019-04-18 19:59:33 +08:00 committed by GitHub
parent 37518a2fb1
commit 49f4be180f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/number-keyboard/en-US.md
View File

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

3
packages/number-keyboard/index.js
View File

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

7
packages/number-keyboard/index.less
View File

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

1
packages/number-keyboard/zh-CN.md
View File

@ -73,6 +73,7 @@ export default {
| delete-button-text | 删除按钮文字 | `String` | `删除` | 1.4.3 | | delete-button-text | 删除按钮文字 | `String` | `删除` | 1.4.3 |
| show-delete-key | 是否展示删除按钮 | `Boolean` | `true` | - | | show-delete-key | 是否展示删除按钮 | `Boolean` | `true` | - |
| hide-on-click-outside | 点击外部时是否收起键盘 | `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 ### Event