vue 两个div多轮对话并实现流式

### 使用 Vue 实现多轮对话的流式布局 为了实现在 Vue 中通过两个 `div` 进行多轮对话并采用流式布局，可以利用 Vue 的双向绑定特性和组件化开发模式来构建聊天界面。下面是一个简单的例子说明如何创建这样的功能。 #### 创建消息列表组件 首先定义一个用于显示消息的历史记录的消息列表组件： ```html <template> <div class="message-container"> <ul> <li v-for="(item, index) in messages" :key="index" :class="{ 'me': item.from === 'me', 'other': item.from !== 'me' }"> {{ item.text }} </li> </ul> </div> </template> <script> export default { props: ['messages'] }; </script> <style scoped> .message-container ul { list-style-type:none; padding-left:0;} .me { text-align:right; } .other { text-align:left; } </style> ``` 此模板中的每一项都根据发送者不同应用不同的样式类以便区分来自用户的回复还是对方的信息[^1]。 #### 主页面逻辑处理 接着是在主页面上集成上述组件以及编写相应的业务逻辑： ```javascript new Vue({ el: '#app', data() { return { inputMessage: '', chatHistory: [] }; }, methods: { sendMessage() { this.chatHistory.push({ from: 'me', text: this.inputMessage }); this.$nextTick(() => { const container = document.querySelector('.message-container'); container.scrollTop = container.scrollHeight; }); setTimeout(() => { // 模拟接收新消息的过程 this.receiveMessage(); }, 1000); this.inputMessage = ''; }, receiveMessage() { let newMsg = "这是模拟收到的新消息"; this.chatHistory.push({from:'other',text:newMsg}); this.$nextTick(() => { const container = document.querySelector('.message-container'); container.scrollTop = container.scrollHeight; }); } } }) ``` 这里使用了 `$nextTick()` 方法等待 DOM 更新完成后再滚动到底部以确保每次新增加一条信息后都能自动滚到最新的一条位置[^2]。 #### HTML 结构 最后是对应的HTML结构部分: ```html <div id="app"> <!-- 对话框 --> <chat-messages :messages="chatHistory"></chat-messages> <!-- 输入区域 --> <input type="text" placeholder="输入您的消息..." v-model="inputMessage"/> <button @click.prevent="sendMessage">发送</button> </div> ``` 以上代码片段展示了怎样在一个基于Vue的应用程序里实现基本的即时通讯效果，并保持良好的用户体验设计原则——即当用户发出或接收到新的消息时能够及时刷新视图并将焦点定位到最后一条消息处。