用vue封装对话框组件并写出代码

好的，回答您的问题。以下是用Vue封装对话框组件的代码：

<template>
<div class="dialogue">
<div class="chatbox">
<div v-for="message in messages" :key="message.id" class="message" :class="{ 'me': message.isMe }">
<div class="avatar" v-if="!message.isMe">{{ otherAvatar }}</div>
<div class="content">
<div class="text">{{ message.text }}</div>
<div class="time">{{ message.time }}</div>
</div>
<div class="avatar" v-if="message.isMe">{{ myAvatar }}</div>
</div>
<form class="input-form">
<input type="text" placeholder="请输入消息" v-model="chatInput" @keyup.enter="sendMessage">
<button type="submit" @click.prevent="sendMessage"><i class="fa fa-paper-plane"</i></button>
</form>
</div>
</div>
</template>

<script>
export default {
props: {
myAvatar: {
type: String,
default: '',
},
otherAvatar: {
type: String,
default: '',
},
messages: {
type: Array,
default: () => [],
}
},
data() {
return {
chatInput: '',
}
},
methods: {
sendMessage() {
if (this.chatInput) {
this.$emit('messageSent', this.chatInput);
this.chatInput = '';
}
},
},
};
</script>

<style>
.dialogue {
display: flex;
justify-content: center;
}
.chatbox {
width: 500px;
height: 500px;
border: 1px solid #ddd;
overflow: auto;
display: flex;
flex-direction: column-reverse;
padding: 10px;
}
.message {
display: flex;
margin: 3px 0;
align-items: center;
}
.me {
flex-direction: row-reverse;
}
.avatar {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #ddd;
margin-right: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #fff;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
background-color: #fff;
padding: 5px;
border-radius: 6px;
box-shadow: 0 2px 3px #ddd;
max-width: 70%;
}
.text {
font-size: 14px;
word-wrap: break-word;
max-width: 400px;
}
.time {
font-size: 12px;
margin-top: 5px;
color: #999;
}
.form {
display: flex;
margin-top: 10px;
}
input[type="text"] {
flex: 1;
height: 40px;
padding: 5px;
border-radius: 6px;
border: none;
font-size: 14px;
}
button[type="submit"] {
width: 60px;
height: 40px;
background-color: #1678C2;
color: #fff;
border: none;
border-radius: 6px;
font-size: 16px;
margin-left: 10px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #1365A6;
}
</style>

希望能对您有帮助。