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

main
ChenZhaoYu 2 years ago
parent 0fdf75eba0
commit dee84e9307

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

@ -333,7 +333,7 @@ const wrapClass = computed(() => {
const footerClass = computed(() => { const footerClass = computed(() => {
let classes = ['p-4'] let classes = ['p-4']
if (isMobile.value) 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 return classes
}) })

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

Loading…
Cancel
Save