更新记录

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

初始化群聊头像显示组件

平台兼容性

Vue2 Vue3
√ √
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.8.3 app-vue app-nvue √ √ √ √ √ √
钉钉小程序 快手小程序 飞书小程序 京东小程序 鸿蒙元服务
√ √ √ √ ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ √ √ √ √

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

属性 说明 类型 默认值
imgs 群聊头像图片数组 Array []
size 群聊头像大小 String/Number 46 （单位px）
round 群聊头像圆角 String/Number 4 （单位px）
padding 群聊头像内边距 String/Number 1.5 （单位px）
backgroundColor 群聊头像背景颜色 String '#dddbd9'
imgRound 每个小图片的圆角值 String/Number 0（单位px）
mode 每个小图片的填充模式 String 'scaleToFill' 此模式用法与uni-app的image组件的mode参数完全一致，详见：image
isDot 是否显示徽标圆点 Boolean false
dotSize 徽标圆点尺寸 String/Number 10 （单位px）
dotColor 徽标圆点颜色 String '#fa5151'
dotOffset 徽标圆点位置 Array [-4, -4] （距离头像顶部和右边距离，单位px）

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...