<template>
<div>
<div id="chatBox" class="chatBox">
<div class="content" v-for="(item, index) in messageContent" :key="index">
<div>{{ item }}</div>
</div>
</div>
<div><el-button @click="handleSend">发送</el-button></div>
</div>
</template>
<script>
export default {
name: "Chat",
data() {
return {
messageContent: []
};
},
watch: {
// 监听当前消息列表,更新时,保持滚动条位于底部
messageContent: function scrollToBottom() {
this.$nextTick(() => {
let message = document.getElementById('chatBox')
// 滚动滑钮到滚动条顶部的距离=滚动条的高度
message.scrollTop = message.scrollHeight
})
}
},
methods: {
handleSend() {
this.messageContent.push("哈哈哈哈");
}
}
};
</script>
<style lang="less" scoped>
.chatBox {
overflow-y: auto;
overflow-x: hidden;
border: 1px solid red;
height: 100px;
}
</style>
<template>
<div>
<Chat />
</div>
</template>
<script>
import Chat from "@/components/Chat";
export default {
name: "HomeView",
components: { Chat },
};
</script>
<style lang="less" scoped>
</style>