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

fix: failed to get correct height of safe area element (#10827)

Browse Source 
* fix: failed to get correct height of safe area element

* docs: upd
This commit is contained in:
neverland 2022-07-17 15:10:35 +08:00 committed by GitHub
parent abce9fdafd
commit 11d25a0b0e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/vant/src/composables/use-height.ts
View File

@ -1,7 +1,10 @@
import { useRect } from '@vant/use'; import { useRect } from '@vant/use';
import { Ref, ref, onMounted, nextTick } from 'vue'; import { Ref, ref, onMounted, nextTick } from 'vue';
export const useHeight = (element: Element | Ref<Element | undefined>) => { export const useHeight = (
element: Element | Ref<Element | undefined>,
withSafeArea?: boolean
) => {
const height = ref<number>(); const height = ref<number>();
const setHeight = () => { const setHeight = () => {
@ -10,8 +13,16 @@ export const useHeight = (element: Element | Ref<Element | undefined>) => {
onMounted(() => { onMounted(() => {
nextTick(setHeight); nextTick(setHeight);
// If the element is using safe area, the system will not return the correct height on page load.
// So we need to wait for the height to be set.
// https://github.com/youzan/vant/issues/10131 // https://github.com/youzan/vant/issues/10131
setTimeout(setHeight, 100); // https://stackoverflow.com/questions/64891541
if (withSafeArea) {
for (let i = 1; i <= 3; i++) {
setTimeout(setHeight, 100 * i);
}
}
}); });
return height; return height;

2
packages/vant/src/composables/use-placeholder.tsx
View File

@ -3,7 +3,7 @@ import { useHeight } from './use-height';
import type { BEM } from '../utils/create'; import type { BEM } from '../utils/create';
export function usePlaceholder(contentRef: Ref<Element | undefined>, bem: BEM) { export function usePlaceholder(contentRef: Ref<Element | undefined>, bem: BEM) {
const height = useHeight(contentRef); const height = useHeight(contentRef, true);
return (renderContent: () => JSX.Element) => ( return (renderContent: () => JSX.Element) => (
<div <div