feat(login): 根据键盘状态调整登录按钮位置
- 添加键盘可见性检测功能 - 在键盘弹出时隐藏登录按钮 - 使用 Vue 生命周期钩子监听窗口大小变化
This commit is contained in:
parent
4317531d34
commit
33bafebfdf
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user