diff --git a/src/views/homePage.vue b/src/views/homePage.vue index 416f956..74e327c 100644 --- a/src/views/homePage.vue +++ b/src/views/homePage.vue @@ -25,9 +25,9 @@ import sendBtn from "../assets/img/homePage/tail/send.png"; import msgBtn from "../assets/img/homePage/tail/msg.png"; -// import VConsole from 'vconsole'; +import VConsole from 'vconsole'; -// const vConsole = new VConsole(); +const vConsole = new VConsole(); // import { useUserStore } from "../store/userPessionCode.js"; const { getQueryVariable, setActiveTabIndex } = useDataStore() @@ -411,6 +411,62 @@ function updateAppHeight() { document.documentElement.style.setProperty('--app-height', `${vh}px`); } +const adjustFooterPosition = (height) => { + console.log('调整底部位置', height) + const footer = document.querySelector('.el-footer'); + const main = document.querySelector('.el-main'); + const homePage = document.querySelector('.homepage'); + const app = document.getElementById('app'); + // Footer 的默认高度(假设为 60px) // 动态推高 Footer + // footer.style.bottom = `${keyboardHeight}px`; + // 给 Main 区域留出 Footer + 键盘的空间 + homePage.style.height = `${height}px`; + app.style.height = `${height}px`; + + void homePage.offsetHeight; + + const html = document.querySelector('html'); + const body = document.querySelector('body'); + html.style.height = `${height}px`; + console.log(html.offsetHeight, 'html') + console.log(html.clientHeight, 'html') + console.log(html.scrollHeight, 'htmlScrollHeight') + console.log(body.clientHeight, 'body') + console.log(body.scrollHeight, 'bodyScrollHeight') + console.log(homePage.offsetHeight, 'homePage') + console.log(homePage.clientHeight, 'homePageClientHeight') + console.log(homePage.scrollHeight, 'homePageScrollHeight') + +}; + +const onFocus = function () { + const visualViewport = window.visualViewport + // 获取可视区域高度 + setTimeout(() => { + console.log('输入框聚焦') + + console.log(visualViewport.height, 'visualViewport.height') + const keyboardHeight = window.innerHeight - visualViewport.height + console.log(window.innerHeight, 'window.innerHeight') + console.log(keyboardHeight, 'keyboardHeight') + + adjustFooterPosition(visualViewport.height) + }, 200) +} + +const onBlur = function () { + const visualViewport = window.visualViewport + setTimeout(() => { + console.log('输入框失焦') + + const keyboardHeight = window.innerHeight - visualViewport.height + console.log(window.innerHeight, 'window.innerHeight') + console.log(visualViewport.height, 'visualViewport.height') + console.log(keyboardHeight, 'keyboardHeight') + adjustFooterPosition(visualViewport.height) + }, 200) +} + onMounted(async () => { const isPhone = /phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone/i.test( @@ -492,8 +548,9 @@ onMounted(async () => { @@ -575,8 +632,21 @@ onMounted(async () => {