n-avatar-group 头像组

头像组，双形态：叠放（默认）是头像横向重叠一行——项目协作成员、群成员、点赞 / 参与者头像墙，max 截断超出部分折叠为 "+N" 尾块；拼合（composite）是群组头像——一个方框内按微信群组头像的行计划铺成员小图（每行铺满无空格，末行居中，缝隙透出框底色）。数据驱动（list），成员头像由内部 n-avatar 渲染（成员项支持 src / text / icon / bgColor / color / name 全套字段）。

1. 组件看不见插槽内容，成组必须走数据（list），这与 n-tabs 的数据驱动是同一边界；单个头像的独立用法直接用 n-avatar
2. 叠放形态：max = 0 不限量全部展示；超出部分折叠为 "+N" 尾块（showMore 可关掉），click 回调的 index 是成员在 list 中的原始下标
3. 叠放形态的 gap 是重叠比例（0~0.5 × 头像边长），默认 0.4；传 0 紧排不重叠。叠放头像需要描边分隔时用 avatar-style 统一下发（如 "border-width:2px;border-style:solid;border-color:#ffffff"）
4. 拼合形态（composite）：群图标语义最多铺前 9 个成员，max 可进一步限制格数；无叠放与 "+N" 尾块；tile-gap 是格子间距（缝隙透出框底色，深浅主题自适应）；size / shape 作用在框上（圆框 / 方框，圆角裁图由框承担，格子恒直角）
5. 拼合的行计划对齐微信群组头像：每行铺满、无空格——1 人整格、2 人对半、3 人上 1 下 2、4 人 2×2、5 人上 2 下 3、6 人两行 3、7/8 人末行居中、9 人 3×3；末行不足人数时格子缩小居中（不拉伸、不留空位）
6. 拼合形态是纯展示标识（格子远低于最小触控标准，微信的语义也是整个群图标一个入口）：不派发成员级 click，点击跳转包在外层容器处理；叠放形态保留成员级 click 与 more

平台兼容性

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	×	×	×	×

API

属性

参数	说明	类型	默认值	可选值
list	头像数据源（src / text / icon / bgColor / color / name）	Array	[]	-
max	最多展示的成员数，超出折叠为 "+N" 尾块；0 = 不限量全部展示	Number	0	-
size	成员统一尺寸：三档预设（small 32 / normal 40 / large 56 px）或数值 px	String / Number	normal	small<br/>normal<br/>large<br/>任意数值
shape	成员统一形状	String	circle	circle<br/>square
gap	叠放重叠比例 0~0.5（× 头像边长 = 重叠像素），0 = 紧排不重叠	Number	0.4	-
show-more	列表超出 max 时显示 "+N" 尾块（拼合形态无尾块，本项忽略）	Boolean	true	-
composite	拼合群组头像形态：单框铺成员小图，行计划对齐微信群组头像（1 人整格 / 2 人对半 / 3 人上1下2 / 4 人 2×2 / 5 人上2下3 / 6~9 人每行 3 人末行居中，超出取前 9）；开启后无叠放与 "+N" 尾块，max 仍可进一步限制格数	Boolean	false	-
tile-gap	拼合形态的格子间距 px（缝隙透出框底色）；叠放形态忽略	Number	2	-
avatar-style	叠放形态：统一加到每个成员头像根节点的行内样式，如叠放描边 "border-width:2px;border-style:solid;border-color:#ffffff"（拼合形态忽略）	String	""	与 css 相同
custom-class	挂到根节点的额外 class（类需定义在组件样式表内）	String	""	-
custom-style	根节点行内样式，如 "margin-left:10px" 用于和相邻元素排间距	String	""	与 css 相同

事件

事件名	说明	回调参数
click	叠放形态：点击成员头像时触发；拼合形态为纯展示标识不派发（点击跳转包在外层容器处理）	{ item, index }（index 为 list 中的下标）
more	点击 "+N" 尾块时触发（仅叠放形态：showMore 开启且列表超出 max 才存在）	-

新窗口 ↗

演示加载中…

示例代码加载中…