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