blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

feat(Popup): add safe-area-inset-top prop (#10357)

Browse Source
This commit is contained in:
neverland 2022-03-06 10:54:22 +08:00 committed by GitHub
parent 3d4247ab15
commit 220efc05ca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/vant/src/popup/Popup.tsx
View File

@ -48,6 +48,7 @@ const popupProps = extend({}, popupSharedProps, {
iconPrefix: String,
closeOnPopstate: Boolean,
closeIconPosition: makeStringProp<PopupCloseIconPosition>('top-right'),
safeAreaInsetTop: Boolean,
safeAreaInsetBottom: Boolean,
});
@ -177,7 +178,7 @@ export default defineComponent({
const onKeydown = (event: KeyboardEvent) => emit('keydown', event);
const renderPopup = lazyRender(() => {
const { round, position, safeAreaInsetBottom } = props;
const { round, position, safeAreaInsetTop, safeAreaInsetBottom } = props;
return (
<div
@ -189,7 +190,10 @@ export default defineComponent({
round,
[position]: position,
}),
{ 'van-safe-area-bottom': safeAreaInsetBottom },
{
'van-safe-area-top': safeAreaInsetTop,
'van-safe-area-bottom': safeAreaInsetBottom,
},
]}
onKeydown={onKeydown}
{...attrs}

1
packages/vant/src/popup/README.md
View File

@ -125,6 +125,7 @@ Use `teleport` prop to specify mount location.
| transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | - |
| transition-appear | Whether to apply transition on initial render | _boolean_ | `false` |
| teleport | Specifies a target element where Popup will be mounted | _string \| Element_ | - |
| safe-area-inset-top | Whether to enable top safe area adaptation | _boolean_ | `false` |
| safe-area-inset-bottom | Whether to enable bottom safe area adaptation | _boolean_ | `false` |
### Events

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

@ -131,6 +131,7 @@ export default {
| transition | 动画类名，等价于 [transition](https://v3.cn.vuejs.org/api/built-in-components.html#transition) 的 `name` 属性 | _string_ | - |
| transition-appear | 是否在初始渲染时启用过渡动画 | _boolean_ | `false` |
| teleport | 指定挂载的节点，等同于 Teleport 组件的 [to 属性](https://v3.cn.vuejs.org/api/built-in-components.html#teleport) | _string \| Element_ | - |
| safe-area-inset-top | 是否开启[顶部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
| safe-area-inset-bottom | 是否开启[底部安全区适配](#/zh-CN/advanced-usage#di-bu-an-quan-qu-gua-pei) | _boolean_ | `false` |
### Events

24
packages/vant/src/popup/test/index.spec.jsx
View File

@ -259,3 +259,27 @@ test('should not call before-close when show prop becomes false', async () => {
await wrapper.setProps({ show: false });
expect(beforeClose).toHaveBeenCalledTimes(0);
});
test('should have safe-area-inset-top class when using safe-area-inset-top prop', () => {
const wrapper = mount(Popup, {
props: {
show: true,
safeAreaInsetTop: true,
},
});
expect(wrapper.find('.van-popup').classes()).toContain('van-safe-area-top');
});
test('should have safe-area-inset-bottom class when using safe-area-inset-bottom prop', () => {
const wrapper = mount(Popup, {
props: {
show: true,
safeAreaInsetBottom: true,
},
});
expect(wrapper.find('.van-popup').classes()).toContain(
'van-safe-area-bottom'
);
});