feat(login): 根据键盘状态调整登录按钮位置

- 添加键盘可见性检测功能
- 在键盘弹出时隐藏登录按钮
- 使用 Vue 生命周期钩子监听窗口大小变化
This commit is contained in:
xingyy 2025-02-25 15:24:09 +08:00
parent 4317531d34
commit 33bafebfdf

View File

@ -141,6 +141,23 @@ const goLogin =async () => {
}
loadingRef.value.loading2=false
}
const isKeyboardVisible = ref(false)
const windowHeight = ref(window.innerHeight)
onMounted(() => {
//
windowHeight.value = window.innerHeight
//
window.addEventListener('resize', () => {
//
isKeyboardVisible.value = window.innerHeight < windowHeight.value * 0.8
})
})
onUnmounted(() => {
window.removeEventListener('resize', () => {})
})
</script>
<template>
@ -202,7 +219,7 @@ const goLogin =async () => {
</van-swipe-item>
</van-swipe>
<van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false" />
<div class="text-center text-14px absolute left-1/2 transform translate-x--1/2 top-630px">
<div v-if="!isKeyboardVisible" class="text-center text-14px absolute left-1/2 transform translate-x--1/2 bottom-20px">
登录即同意<span class="text-#3454AF " @click="$router.push('/privacyPolicy')">隐私政策</span>
</div>
</div>