移除调试信息
This commit is contained in:
@@ -1,11 +1,5 @@
|
||||
<template>
|
||||
<van-config-provider :theme="theme" class="app-provider">
|
||||
<pre style="position:fixed; left:0; top:0; z-index:9999;
|
||||
background:rgba(0,0,0,0.7); color:#0f0;
|
||||
font-size:10px; max-height:50vh; overflow:auto;">
|
||||
{{ log }}
|
||||
</pre>
|
||||
|
||||
<div class="app-root">
|
||||
<RouterView />
|
||||
<van-tabbar v-model="active" v-show="showTabbar">
|
||||
@@ -30,51 +24,26 @@
|
||||
import { RouterView, useRoute } from 'vue-router'
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
|
||||
const log = ref('')
|
||||
|
||||
const updateInfo = () => {
|
||||
const updateVh = () => {
|
||||
// 获取真实的视口高度(PWA 模式下准确)
|
||||
const vh = window.innerHeight
|
||||
const safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('padding-bottom')
|
||||
|
||||
// 设置 CSS 变量,让所有组件使用准确的视口高度
|
||||
document.documentElement.style.setProperty('--vh', `${vh}px`)
|
||||
document.documentElement.style.setProperty('--vh-offset', `${vh}px`)
|
||||
|
||||
// 获取 TabBar 的实际高度
|
||||
const tabbar = document.querySelector('.van-tabbar')
|
||||
const tabbarHeight = tabbar ? tabbar.offsetHeight : 0
|
||||
|
||||
log.value = JSON.stringify({
|
||||
innerHeight: window.innerHeight,
|
||||
outerHeight: window.outerHeight,
|
||||
documentElementClientHeight: document.documentElement.clientHeight,
|
||||
viewport: window.visualViewport
|
||||
? {
|
||||
height: window.visualViewport.height,
|
||||
offsetTop: window.visualViewport.offsetTop,
|
||||
}
|
||||
: null,
|
||||
cssVarVh: getComputedStyle(document.documentElement).getPropertyValue('--vh'),
|
||||
tabbarHeight: tabbarHeight,
|
||||
safeAreaInsetBottom: safeAreaBottom,
|
||||
computedSpace: `${vh} - ${tabbarHeight} = ${vh - tabbarHeight}px`,
|
||||
}, null, 2)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
updateInfo()
|
||||
window.addEventListener('resize', updateInfo)
|
||||
updateVh()
|
||||
window.addEventListener('resize', updateVh)
|
||||
// 监听 iOS Safari 视口变化
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.addEventListener('resize', updateInfo)
|
||||
window.visualViewport.addEventListener('resize', updateVh)
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', updateInfo)
|
||||
window.removeEventListener('resize', updateVh)
|
||||
if (window.visualViewport) {
|
||||
window.visualViewport.removeEventListener('resize', updateInfo)
|
||||
window.visualViewport.removeEventListener('resize', updateVh)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -130,7 +99,6 @@ const handleTabClick = (path) => {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
border: 2px solid red; /* 调试用红框 */
|
||||
}
|
||||
|
||||
/* TabBar 固定在底部 */
|
||||
|
||||
Reference in New Issue
Block a user