honeymoose
/
chatgpt-web
mirror of https://github.com/Chanzhaoyu/chatgpt-web.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: 容器滚动永远保持在最底部

This commit is contained in:
ChenZhaoYu 2023-02-10 10:29:38 +08:00
parent 3f75d0b53d
commit 6b96f45951
1 changed files with 5 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/views/Chat/index.vue
View File

@ -1,5 +1,5 @@
<script setup lang='ts'> <script setup lang='ts'>
import { onMounted, ref } from 'vue' import { nextTick, onMounted, ref } from 'vue'
import { NButton, NInput, NPopover, useMessage } from 'naive-ui' import { NButton, NInput, NPopover, useMessage } from 'naive-ui'
import { Message } from './components' import { Message } from './components'
import { fetchChatAPI } from './request' import { fetchChatAPI } from './request'
@ -56,16 +56,12 @@ async function handleSubmit() {
} }
finally { finally {
loading.value = false loading.value = false
scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight)
} }
} }
function addMessage(message: string, reversal = false) { function addMessage(message: string, reversal = false) {
list.value.push({ list.value.push({ dateTime: new Date().toLocaleString(), message, reversal })
dateTime: new Date().toLocaleString(), nextTick(() => scrollRef.value && (scrollRef.value.scrollTop = scrollRef.value.scrollHeight))
message,
reversal,
})
} }
</script> </script>
@ -93,10 +89,7 @@ function addMessage(message: string, reversal = false) {
<div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto"> <div ref="scrollRef" class="h-full p-4 overflow-hidden overflow-y-auto">
<div> <div>
<Message <Message
v-for="(item, index) of list" v-for="(item, index) of list" :key="index" :date-time="item.dateTime" :message="item.message"
:key="index"
:date-time="item.dateTime"
:message="item.message"
:reversal="item.reversal" :reversal="item.reversal"
/> />
</div> </div>
@ -104,12 +97,7 @@ function addMessage(message: string, reversal = false) {
</main> </main>
<footer class="p-4"> <footer class="p-4">
<div class="flex items-center justify-between space-x-2"> <div class="flex items-center justify-between space-x-2">
<NInput <NInput v-model:value="value" :disabled="loading" placeholder="Type a message..." @keyup="handleEnter" />
v-model:value="value"
:disabled="loading"
placeholder="Type a message..."
@keyup="handleEnter"
/>
<NButton type="primary" :loading="loading" @click="handleSubmit"> <NButton type="primary" :loading="loading" @click="handleSubmit">
<template #icon> <template #icon>
<Icon icon="ri:send-plane-fill" /> <Icon icon="ri:send-plane-fill" />