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 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> </script>
<template> <template>
@ -202,7 +219,7 @@ const goLogin =async () => {
</van-swipe-item> </van-swipe-item>
</van-swipe> </van-swipe>
<van-number-keyboard v-model="code" :show="showKeyboard" @blur="showKeyboard = false" /> <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> 登录即同意<span class="text-#3454AF " @click="$router.push('/privacyPolicy')">隐私政策</span>
</div> </div>
</div> </div>