帮我用vue3写一个微信聊天页
时间: 2023-08-04 09:16:23 浏览: 93
好的,下面是一个简单的微信聊天页的实现,使用 Vue3 和 Tailwind CSS。
首先,我们需要创建一个名为 `Chat.vue` 的 Vue 单文件组件,然后在组件中引入依赖:
```html
<template>
<div class="container mx-auto my-10 max-w-lg">
<div class="bg-white rounded-lg shadow-lg p-4">
<div>
<h1 class="text-lg font-bold">微信聊天页</h1>
</div>
<div class="mt-4">
<!-- 聊天消息列表 -->
</div>
<div class="mt-4">
<!-- 发送消息表单 -->
</div>
</div>
</div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const messages = ref([]);
const messageInput = ref('');
// 处理发送消息的函数
const sendMessage = () => {
// 将消息添加到消息列表中
messages.value.push({
text: messageInput.value,
isMe: true,
});
// 清空输入框
messageInput.value = '';
};
return {
messages,
messageInput,
sendMessage,
};
},
};
</script>
```
在上面的代码中,我们创建了一个名为 `Chat` 的组件,并在其中定义了两个响应式变量 `messages` 和 `messageInput`,分别表示聊天消息列表和发送消息的输入框。我们还定义了一个 `sendMessage` 函数,用于处理发送消息的逻辑。
接下来,我们需要在模板中添加聊天消息列表和发送消息表单:
```html
<template>
<div class="container mx-auto my-10 max-w-lg">
<div class="bg-white rounded-lg shadow-lg p-4">
<div>
<h1 class="text-lg font-bold">微信聊天页</h1>
</div>
<div class="mt-4">
<div v-for="(message, index) in messages" :key="index" class="flex items-start py-2">
<!-- 左侧头像 -->
<div class="w-8 h-8 rounded-full bg-gray-300 mr-2"></div>
<!-- 聊天内容 -->
<div class="flex flex-col">
<div :class="{'ml-auto': message.isMe}" class="bg-gray-100 rounded-lg py-2 px-4 max-w-md">
<p class="text-sm">{{ message.text }}</p>
</div>
<div :class="{'ml-auto': message.isMe}" class="text-xs text-gray-400 mt-1">{{ message.time }}</div>
</div>
</div>
</div>
<div class="mt-4">
<form @submit.prevent="sendMessage" class="flex items-center">
<input v-model="messageInput" type="text" class="flex-1 py-2 px-4 rounded-full bg-gray-100 mr-2" placeholder="输入消息...">
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-full">发送</button>
</form>
</div>
</div>
</div>
</template>
```
在上面的代码中,我们使用了 Tailwind CSS 的样式来美化聊天界面。聊天消息列表使用了 `v-for` 指令来遍历 `messages` 数组中的消息,并根据 `isMe` 属性来判断消息是自己发送的还是对方发送的。发送消息表单使用了 `@submit.prevent` 事件监听器来处理表单提交事件,并调用 `sendMessage` 函数来发送消息。
最后,我们需要在父组件中引入 `Chat` 组件并渲染它:
```html
<template>
<div>
<Chat />
</div>
</template>
<script>
import Chat from './Chat.vue';
export default {
components: {
Chat,
},
};
</script>
```
至此,我们就实现了一个简单的微信聊天页。当然,这只是一个基础版本,你可以根据自己的需求进行扩展和优化。
阅读全文