前言
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'