fix: iOS安全距离和输入溢出[#266]

This commit is contained in:
ChenZhaoYu 2023-03-04 15:46:28 +08:00
parent 0fdf75eba0
commit dee84e9307
3 changed files with 15 additions and 2 deletions

View File

@ -3,3 +3,7 @@ body,
#app {
height: 100%;
}
body {
padding-bottom: constant(safe-area-inset-bottom);
}

View File

@ -333,7 +333,7 @@ const wrapClass = computed(() => {
const footerClass = computed(() => {
let classes = ['p-4']
if (isMobile.value)
classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'h-14', 'overflow-hidden']
classes = ['sticky', 'left-0', 'bottom-0', 'right-0', 'p-2', 'pr-4', 'overflow-hidden']
return classes
})

View File

@ -32,6 +32,15 @@ const getMobileClass = computed<CSSProperties>(() => {
return {}
})
const mobileSafeArea = computed(() => {
if (isMobile.value) {
return {
paddingBottom: 'env(safe-area-inset-bottom)',
}
}
return {}
})
watch(
isMobile,
(val) => {
@ -56,7 +65,7 @@ watch(
:style="getMobileClass"
@update-collapsed="handleUpdateCollapsed"
>
<div class="flex flex-col h-full">
<div class="flex flex-col h-full" :style="mobileSafeArea">
<main class="flex flex-col flex-1 min-h-0">
<div class="p-4">
<NButton dashed block @click="handleAdd">