Cool
/
Chat-Vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改overflow，将overflow调整到最底部

This commit is contained in:
Cool 2023-11-21 12:12:25 +08:00
parent 09badc802e
commit 963e5c93e1
1 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/views/main/Chat.vue
View File

@ -4,7 +4,7 @@
<h1 class="title">聊天室</h1> <h1 class="title">聊天室</h1>
<hr class="divide"> <hr class="divide">
</div> </div>
<div class="body"> <div class="body" id="chat">
<div v-for="(message, index) in messageList" :key="index"> <div v-for="(message, index) in messageList" :key="index">
@ -13,7 +13,7 @@
<p>{{ message.nickName }} {{ message.time }}</p> <p>{{ message.nickName }} {{ message.time }}</p>
</div> </div>
<div class="info"> <div class="info">
<el-avatar :src="message.pic" class="head"></el-avatar> <el-avatar :src="message.pic" class="head"></el-avatar>
<div class="message"> <div class="message">
<div class="detail"> <div class="detail">
{{ message.message }} {{ message.message }}
@ -35,7 +35,7 @@
{{ message.message }} {{ message.message }}
</div> </div>
</div> </div>
<el-avatar :src="message.pic" class="head"></el-avatar> <el-avatar :src="message.pic" class="head"></el-avatar>
</div> </div>
</div> </div>
@ -58,6 +58,7 @@
<script> <script>
export default { export default {
data() { data() {
return { return {
messageList: [ messageList: [
@ -120,7 +121,12 @@ export default {
textarea: "", textarea: "",
}; };
}, },
mounted() {
var container = document.getElementById('chat');
container.scrollTop = container.scrollHeight;
},
methods: { methods: {
SendMessage(textarea) { SendMessage(textarea) {
//发送消息 //发送消息
console.log(textarea); console.log(textarea);
@ -154,6 +160,7 @@ export default {
} }
.body { .body {
// overflow: hidden;
overflow: auto; overflow: auto;
/* 可选：设置最大高度以限制滚动区域 */ /* 可选：设置最大高度以限制滚动区域 */
max-height: 350px; max-height: 350px;