用vue渲染出聊天室的UI界面的具体代码
时间: 2024-04-07 07:32:39 浏览: 16
以下是一个简单的Vue组件,用于渲染出聊天室的UI界面:
```vue
<template>
<div class="chat-room">
<div class="chat-history">
<div v-for="(message, index) in messages" :key="index" class="message">
<div class="message-header">
<span class="message-sender">{{ message.sender }}</span>
<span class="message-time">{{ message.time }}</span>
</div>
<div class="message-body">{{ message.text }}</div>
</div>
</div>
<div class="chat-input">
<input type="text" v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type your message here...">
<button @click="sendMessage">Send</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
messages: [], // 存储聊天记录
newMessage: "" // 存储用户输入的新消息
};
},
methods: {
sendMessage() {
// 发送新消息到后台
// ...
// 清空输入框
this.newMessage = "";
}
}
};
</script>
<style scoped>
.chat-room {
display: flex;
flex-direction: column;
height: 100%;
}
.chat-history {
flex: 1;
overflow-y: scroll;
}
.message {
margin-bottom: 10px;
}
.message-header {
display: flex;
justify-content: space-between;
font-size: 12px;
color: #999;
}
.message-sender {
font-weight: bold;
margin-right: 10px;
}
.message-time {
margin-left: 10px;
}
.message-body {
margin-top: 5px;
font-size: 14px;
}
.chat-input {
display: flex;
margin-top: 10px;
}
.chat-input input {
flex: 1;
margin-right: 10px;
padding: 5px;
font-size: 14px;
}
.chat-input button {
padding: 5px 10px;
font-size: 14px;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
```
这个组件包含了一个聊天记录区域和一个输入框,用户可以在输入框中输入新消息并发送。当有新消息到达时,它们会被添加到聊天记录区域中。你可以根据自己的需求进行调整和扩展。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)