fix(MessageDetail): 修复消息列表滚动和输入框间距问题
调整滚动逻辑确保消息列表能正确滚动到底部 添加输入框光标间距避免键盘遮挡 关闭对话框时重置相关状态
Showing
2 changed files
with
13 additions
and
4 deletions
.vercel/project.json
0 → 100644
| 1 | +{"projectName":"trae_jgdl_l75p"} | ||
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| ... | @@ -69,6 +69,7 @@ | ... | @@ -69,6 +69,7 @@ |
| 69 | placeholder="请输入回复内容..." | 69 | placeholder="请输入回复内容..." |
| 70 | :rows="2" | 70 | :rows="2" |
| 71 | :max-length="500" | 71 | :max-length="500" |
| 72 | + :cursorSpacing="100" | ||
| 72 | class="message-input" | 73 | class="message-input" |
| 73 | @focus="handleInputFocus" | 74 | @focus="handleInputFocus" |
| 74 | /> | 75 | /> |
| ... | @@ -249,10 +250,13 @@ const sendMessage = async () => { | ... | @@ -249,10 +250,13 @@ const sendMessage = async () => { |
| 249 | */ | 250 | */ |
| 250 | const scrollToBottom = () => { | 251 | const scrollToBottom = () => { |
| 251 | if (messages.value.length > 0) { | 252 | if (messages.value.length > 0) { |
| 252 | - // 使用 setTimeout 确保 DOM 更新完成后再滚动 | 253 | + // 先重置 scrollIntoView,然后设置新值确保滚动触发 |
| 253 | - setTimeout(() => { | 254 | + scrollIntoView.value = '' |
| 254 | - scrollIntoView.value = `msg-${messages.value.length - 1}` | 255 | + nextTick(() => { |
| 255 | - }, 100) | 256 | + setTimeout(() => { |
| 257 | + scrollIntoView.value = `msg-${messages.value.length - 1}` | ||
| 258 | + }, 100) | ||
| 259 | + }) | ||
| 256 | } | 260 | } |
| 257 | } | 261 | } |
| 258 | 262 | ||
| ... | @@ -271,6 +275,10 @@ const handleInputFocus = () => { | ... | @@ -271,6 +275,10 @@ const handleInputFocus = () => { |
| 271 | const handleClose = () => { | 275 | const handleClose = () => { |
| 272 | visible.value = false | 276 | visible.value = false |
| 273 | inputMessage.value = '' | 277 | inputMessage.value = '' |
| 278 | + // 重置滚动相关状态 | ||
| 279 | + scrollTop.value = 0 | ||
| 280 | + scrollIntoView.value = '' | ||
| 281 | + messages.value = [] | ||
| 274 | emit('close') | 282 | emit('close') |
| 275 | } | 283 | } |
| 276 | 284 | ... | ... |
-
Please register or login to post a comment