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

feat(Popup): add safe-area-inset-bottom prop (#4419)

Browse Source
This commit is contained in:
neverland 2019-09-10 20:15:24 +08:00 committed by GitHub
parent 50aa27fc64
commit a80773e19e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 15 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/action-sheet/index.less
View File

@ -56,9 +56,4 @@
font-size: @action-sheet-close-icon-size; font-size: @action-sheet-close-icon-size;
line-height: inherit; line-height: inherit;
} }
&--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
} }

3
src/action-sheet/index.tsx
View File

@ -118,7 +118,7 @@ function ActionSheet(
return ( return (
<Popup <Popup
class={bem({ 'safe-area-inset-bottom': props.safeAreaInsetBottom })} class={bem()}
position="bottom" position="bottom"
round={props.round} round={props.round}
value={props.value} value={props.value}
@ -128,6 +128,7 @@ function ActionSheet(
lockScroll={props.lockScroll} lockScroll={props.lockScroll}
getContainer={props.getContainer} getContainer={props.getContainer}
closeOnClickOverlay={props.closeOnClickOverlay} closeOnClickOverlay={props.closeOnClickOverlay}
safeAreaInsetBottom={props.safeAreaInsetBottom}
{...inherit(ctx, true)} {...inherit(ctx, true)}
> >
{Header()} {Header()}

2
src/popup/README.md
View File

@ -134,7 +134,7 @@ export default {
| close-icon | Close icon name | *string* | `cross` | 2.2.0 | | close-icon | Close icon name | *string* | `cross` | 2.2.0 |
| transition | Transition | *string* | `popup-slide` | - | | transition | Transition | *string* | `popup-slide` | - |
| get-container | Return the mount node for Popup | *string \| () => HTMLElement* | - | - | | get-container | Return the mount node for Popup | *string \| () => HTMLElement* | - | - |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | 2.2.1 |
### Events ### Events

1
src/popup/README.zh-CN.md
View File

@ -145,6 +145,7 @@ export default {
| close-icon | 关闭图标名称或图片链接 | *string* | `cross` | 2.2.0 | | close-icon | 关闭图标名称或图片链接 | *string* | `cross` | 2.2.0 |
| transition | 动画类名，用法与 Vue 原生`transtion`组件的`name`属性一致 | *string* | - | - | | transition | 动画类名，用法与 Vue 原生`transtion`组件的`name`属性一致 | *string* | - | - |
| get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - | | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | *string \| () => HTMLElement* | - | - |
| safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | 2.2.1 |
### Events ### Events

7
src/popup/index.js
View File

@ -12,6 +12,7 @@ export default createComponent({
duration: Number, duration: Number,
closeable: Boolean, closeable: Boolean,
transition: String, transition: String,
safeAreaInsetBottom: Boolean,
closeIcon: { closeIcon: {
type: String, type: String,
default: 'cross' default: 'cross'
@ -63,7 +64,11 @@ export default createComponent({
<div <div
vShow={this.value} vShow={this.value}
style={style} style={style}
class={bem({ round, [position]: position })} class={bem({
round,
[position]: position,
'safe-area-inset-bottom': this.safeAreaInsetBottom
})}
onClick={this.onClick} onClick={this.onClick}
> >
{this.slots()} {this.slots()}

5
src/popup/index.less
View File

@ -63,6 +63,11 @@
} }
} }
&--safe-area-inset-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
&-slide-top-enter, &-slide-top-enter,
&-slide-top-leave-active { &-slide-top-leave-active {
transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);