更新记录

1.0.0（2024-12-06） 下载此版本

初始化群聊头像显示组件

平台兼容性

uni-app

其他

nl-group-chat-avatar

微信/企业微信/钉钉/飞书 群聊头像显示组件

• 支持自定义大小
• 可配置颜色
• 多端兼容

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本使用

通过list参数传入日程列表值，该值为一个数组，

<template>
    <view class="wrap">
        <view class="title">最多显示九张图片</view>
        <view class="item">
            <nl-group-chat-avatar :imgs="imgs.slice(0, 1)" :is-dot="false"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 2)" :is-dot="false"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 3)" :is-dot="false"></nl-group-chat-avatar>
        </view>
        <view class="item">
            <nl-group-chat-avatar :imgs="imgs.slice(0, 4)" :is-dot="false"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 5)" :is-dot="false"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 6)" :is-dot="false"></nl-group-chat-avatar>
        </view>
        <view class="item">
            <nl-group-chat-avatar :imgs="imgs.slice(0, 7)" :is-dot="false"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 8)" :is-dot="false"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 9)" :is-dot="false"></nl-group-chat-avatar>
        </view>
        <view class="title">显示徽标红点</view>
        <view class="item">
            <nl-group-chat-avatar :imgs="imgs.slice(0, 2)" :is-dot="true"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 5)" :is-dot="true"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 8)" :is-dot="true"></nl-group-chat-avatar>
        </view>

        <view class="title">圆形头像</view>
        <view class="item">
            <nl-group-chat-avatar :imgs="imgs.slice(0, 1)" round="22" img-round="100" padding="0" :is-dot="false"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 5)" round="22" :is-dot="false" :dot-offset="[0, 0]"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 9)" round="22" :is-dot="true" :dot-offset="[0, 0]"></nl-group-chat-avatar>
        </view>
        <view class="title">不同尺寸头像</view>
        <view class="item">
            <nl-group-chat-avatar :imgs="imgs.slice(0, 7)" size="44" round="4" :is-dot="false"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 8)" size="80" round="4" :is-dot="true" dot-size="16" :dot-offset="[-6, -6]"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 9)" size="120" round="100"></nl-group-chat-avatar>
        </view>
        <view class="title">其他头像</view>
        <view class="item">
            <nl-group-chat-avatar :imgs="imgs.slice(0, 7)" background-color="#ff0000" size="80" round="4"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 7)" background-color="#fcff45" size="80" round="4" img-round="50"></nl-group-chat-avatar>
            <nl-group-chat-avatar :imgs="imgs.slice(0, 8)" background-color="#73c3ff" size="80" round="4" img-round="50"></nl-group-chat-avatar>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                imgs: [
                    'https://q5.itc.cn/q_70/images03/20240406/2c8f1d2cd13e4d4392fa07ccaab1f219.jpeg',
                    'https://q1.itc.cn/q_70/images03/20240414/d477378709494a9e8adf154fb5200feb.jpeg',
                    'https://q5.itc.cn/q_70/images03/20240406/2c8f1d2cd13e4d4392fa07ccaab1f219.jpeg',
                    'https://q5.itc.cn/q_70/images03/20240406/2c8f1d2cd13e4d4392fa07ccaab1f219.jpeg',
                    'https://img1.baidu.com/it/u=2021651211,1099682584&fm=253&app=138&f=JPEG?w=806&h=800',
                    'https://q5.itc.cn/q_70/images03/20240406/2c8f1d2cd13e4d4392fa07ccaab1f219.jpeg',
                    'https://q1.itc.cn/q_70/images03/20240414/d477378709494a9e8adf154fb5200feb.jpeg',
                    'https://q5.itc.cn/q_70/images03/20240406/2c8f1d2cd13e4d4392fa07ccaab1f219.jpeg',
                    'https://q5.itc.cn/q_70/images03/20240406/2c8f1d2cd13e4d4392fa07ccaab1f219.jpeg',
                    'https://img1.baidu.com/it/u=2021651211,1099682584&fm=253&app=138&f=JPEG?w=806&h=800',
                ],
            }
        },
    }
</script>
<style scoped>
    .wrap {
        margin: 10px;
    }
    .item {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
    }
    .title {
        text-align: center;
        margin-top: 20px;
    }
</style>

API