您的位置:首页 > 文旅 > 美景 > 服装设计效果图_网站规划市场分析_企业seo职位_产品如何做网络推广

服装设计效果图_网站规划市场分析_企业seo职位_产品如何做网络推广

2024/12/23 7:18:34 来源:https://blog.csdn.net/qq_34465338/article/details/142386641  浏览:    关键词:服装设计效果图_网站规划市场分析_企业seo职位_产品如何做网络推广
服装设计效果图_网站规划市场分析_企业seo职位_产品如何做网络推广

前言

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'

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com