帮我用vue写一个类似于微信的对话页面,需要能够适配手机的
时间: 2023-06-20 22:07:42 浏览: 178
好的,下面是一个简单的 Vue 对话页面示例,包括一个输入框和一个消息列表。
代码如下:
```vue
<template>
<div class="chat-container">
<div class="message-list">
<div v-for="(message, index) in messages" :key="index" class="message" :class="{ 'is-sent': message.isSent }">
<div class="message-content">{{ message.content }}</div>
</div>
</div>
<div class="input-box">
<input v-model="newMessage" @keyup.enter="sendMessage" type="text" placeholder="Type a message...">
<button @click="sendMessage">Send</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
messages: [
{ content: 'Hello!', isSent: true },
{ content: 'Hi there!', isSent: false },
{ content: 'How are you?', isSent: true },
{ content: 'I am doing well, thanks for asking!', isSent: false }
],
newMessage: ''
};
},
methods: {
sendMessage() {
if (!this.newMessage) {
return;
}
this.messages.push({
content: this.newMessage,
isSent: true
});
this.newMessage = '';
}
}
};
</script>
<style>
.chat-container {
display: flex;
flex-direction: column;
height: 100%;
}
.message-list {
flex-grow: 1;
overflow-y: scroll;
padding: 8px;
}
.message {
margin-bottom: 8px;
max-width: 80%;
padding: 8px;
border-radius: 8px;
background-color: #eee;
}
.message.is-sent {
align-self: flex-end;
background-color: #0084ff;
color: #fff;
}
.message-content {
word-wrap: break-word;
}
.input-box {
display: flex;
align-items: center;
padding: 8px;
background-color: #fff;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
}
.input-box input {
flex-grow: 1;
padding: 8px;
border: none;
outline: none;
}
.input-box button {
margin-left: 8px;
padding: 8px;
border: none;
border-radius: 4px;
background-color: #0084ff;
color: #fff;
cursor: pointer;
}
</style>
```
你可以在 `messages` 数组中添加任何消息,并使用 `isSent` 属性指定是谁发送的消息。`newMessage` 数据绑定到输入框,当用户按下回车键或点击“发送”按钮时将其发送到消息列表中。
CSS 样式对聊天窗口和输入框进行了基本样式和布局。这个示例可以适配手机屏幕大小。
阅读全文