前言

Vue3-beautiful-chat 组件有四个插槽可以定制

一、user-avatar（头像）

首先是头像插槽，我们可以直接在 <beautiful-chat></beautiful-chat> 中间使用；

作用：

我们可以在用户头像上添加自定义样式，比如添加节日边框、可以使用首字母作为头像。。。

代码：

<template v-slot:user-avatar="{ message, user }"><div style="border-radius:50%; color: pink; font-size: 15px;line-height:25px;text-align:center;background: tomato;width: 25px !important;height: 25px !important;min-width: 30px;min-height: 30px;margin: 5px;font-weight:bold"v-if="message.type === 'text' && user && user.name">{{user.name.toUpperCase()[0]}}</div>
</template>

如果我们只是单纯的想替换用户头像，可以直接在参数 participants 里配置 imageUrl

participants: [{id: 'user1',name: 'Matteo',imageUrl: 'https://avatars3.githubusercontent.com/u/1915989?s=230&v=4'},{id: 'user2',name: 'Support',imageUrl: 'https://avatars3.githubusercontent.com/u/37018832?s=200&v=4'},{id: 'me'