当前位置：首页 > article >正文

聊天组件 Vue3-beautiful-chat 插槽

article 2024/9/25 9:55:55

前言

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'