feat(登录页): 添加输入框聚焦时页面平滑滚动功能
在登录页的电话输入框聚焦时,页面会自动向上平滑滚动150px,以避免输入框被键盘遮挡,提升用户体验。
Showing
2 changed files
with
15 additions
and
3 deletions
| ... | @@ -28,6 +28,7 @@ | ... | @@ -28,6 +28,7 @@ |
| 28 | type="tel" | 28 | type="tel" |
| 29 | autocomplete="tel" | 29 | autocomplete="tel" |
| 30 | required | 30 | required |
| 31 | + @focus="handleInputFocus" | ||
| 31 | class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" | 32 | class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500" |
| 32 | /> | 33 | /> |
| 33 | </div> | 34 | </div> |
| ... | @@ -127,6 +128,17 @@ import FrostedGlass from "@/components/ui/FrostedGlass.vue"; | ... | @@ -127,6 +128,17 @@ import FrostedGlass from "@/components/ui/FrostedGlass.vue"; |
| 127 | import { useAuth } from "@/contexts/auth"; | 128 | import { useAuth } from "@/contexts/auth"; |
| 128 | import { loginAPI, getUserInfoAPI } from "@/api/users"; | 129 | import { loginAPI, getUserInfoAPI } from "@/api/users"; |
| 129 | import { useTitle } from "@vueuse/core"; | 130 | import { useTitle } from "@vueuse/core"; |
| 131 | + | ||
| 132 | +const handleInputFocus = () => { | ||
| 133 | + setTimeout(() => { | ||
| 134 | + // 使用平滑滚动将页面向上移动200px(根据实际按钮区域高度调整) | ||
| 135 | + window.scrollTo({ | ||
| 136 | + top: 150, | ||
| 137 | + behavior: 'smooth' | ||
| 138 | + }); | ||
| 139 | + }, 100); | ||
| 140 | +}; | ||
| 141 | + | ||
| 130 | const $route = useRoute(); | 142 | const $route = useRoute(); |
| 131 | useTitle($route.meta.title); | 143 | useTitle($route.meta.title); |
| 132 | 144 | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2025-03-24 13:04:21 | 2 | * @Date: 2025-03-24 13:04:21 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-03-26 13:03:11 | 4 | + * @LastEditTime: 2025-03-26 13:09:59 |
| 5 | * @FilePath: /mlaj/src/views/profile/SettingsPage.vue | 5 | * @FilePath: /mlaj/src/views/profile/SettingsPage.vue |
| 6 | * @Description: 用户设置页面 | 6 | * @Description: 用户设置页面 |
| 7 | --> | 7 | --> |
| ... | @@ -44,7 +44,7 @@ | ... | @@ -44,7 +44,7 @@ |
| 44 | </div> | 44 | </div> |
| 45 | 45 | ||
| 46 | <!-- 密码设置 --> | 46 | <!-- 密码设置 --> |
| 47 | - <div class="p-4" @click="router.push('/profile/settings/password')"> | 47 | + <!-- <div class="p-4" @click="router.push('/profile/settings/password')"> |
| 48 | <div class="flex items-center justify-between"> | 48 | <div class="flex items-center justify-between"> |
| 49 | <div> | 49 | <div> |
| 50 | <h3 class="text-base font-medium text-gray-900">修改密码</h3> | 50 | <h3 class="text-base font-medium text-gray-900">修改密码</h3> |
| ... | @@ -52,7 +52,7 @@ | ... | @@ -52,7 +52,7 @@ |
| 52 | </div> | 52 | </div> |
| 53 | <ChevronRightIcon class="w-5 h-5 text-gray-400" /> | 53 | <ChevronRightIcon class="w-5 h-5 text-gray-400" /> |
| 54 | </div> | 54 | </div> |
| 55 | - </div> | 55 | + </div> --> |
| 56 | 56 | ||
| 57 | <!-- 视频上传 --> | 57 | <!-- 视频上传 --> |
| 58 | <div class="p-4" @click="router.push('/upload_video')"> | 58 | <div class="p-4" @click="router.push('/upload_video')"> | ... | ... |
-
Please register or login to post a comment