fix: iOS安全距离和输入溢出[#266]
This commit is contained in:
parent
0fdf75eba0
commit
dee84e9307
|
@ -3,3 +3,7 @@ body,
|
|||
#app {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-bottom: constant(safe-area-inset-bottom);
|
||||
}
|
||||
|
|
|
@ -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
|
||||
})
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue