Mural Plus

Avatar 头像 ​

头像用于展示用户或事物形象，支持图片、文字、图标与自定义插槽四种内容；头像组可将多个头像横向叠放，并通过最大数量限制自动追加计数。

小程序APPWeb
✓✓✓

实例 ​

以下按属性分别说明 mu-avatar 与 mu-avatar-group 的用法，可按需组合。

html
<template>
  <mu-avatar src="/static/logo.png"></mu-avatar>
</template>

尺寸 ​

设置头像尺寸，单位为 rpx。

html
<mu-avatar src="/static/logo.png" :size="48"></mu-avatar>
<mu-avatar src="/static/logo.png" :size="64"></mu-avatar>
<mu-avatar src="/static/logo.png" :size="80"></mu-avatar>
<mu-avatar src="/static/logo.png" :size="120"></mu-avatar>

形状 ​

设置头像形状，可选 circle、square。

html
<mu-avatar src="/static/logo.png" shape="square"></mu-avatar>

圆角 ​

设置圆角大小，仅在形状不为 circle 时生效。

html
<mu-avatar src="/static/logo.png" shape="square" :radius="20"></mu-avatar>

文字头像 ​

未设置图片时，可显示文字，并通过背景色与文字颜色控制外观。

html
<mu-avatar text="A" background="#4C76FF" color="#FFFFFF"></mu-avatar>
<mu-avatar text="UI" background="#00D162" color="#FFFFFF" shape="square" :radius="12"></mu-avatar>
<mu-avatar text="Mu" background="#FFAD4C" color="#FFFFFF" :size="96"></mu-avatar>

图标头像 ​

也可使用图标作为头像内容。

html
<mu-avatar icon="picture" background="#EEF1FF" color="#4C76FF"></mu-avatar>
<mu-avatar icon="picture" background="#4C76FF" color="#FFFFFF" shape="square" :radius="12"></mu-avatar>

插槽内容 ​

图片、文字、图标均未设置时，渲染默认插槽内容。

html
<mu-avatar background="#1B1D21">
  <text class="slot-text">PHP</text>
</mu-avatar>

头像组 ​

头像组用于将多个头像横向叠放，通过 list 传入头像数组。

html
<mu-avatar-group :list="imageList"></mu-avatar-group>

头像组最多显示 ​

限制显示的头像数量，超出部分以 +N 展示，0 表示不限制。

html
<mu-avatar-group :list="imageList" :max="3"></mu-avatar-group>

头像组重叠距离 ​

设置头像之间的叠放重叠距离，单位为 rpx，0 时按尺寸自动计算。

html
<mu-avatar-group :list="textList" :max="2" :overlap="32"></mu-avatar-group>

头像组尺寸与形状 ​

统一设置组内头像的尺寸与形状。

html
<mu-avatar-group :list="textList" :size="48"></mu-avatar-group>
<mu-avatar-group :list="textList" :size="96" shape="square" :radius="12"></mu-avatar-group>

头像组计数配色 ​

设置 +N 计数头像的背景色与文字颜色。

html
<mu-avatar-group :list="imageList" :max="3" more-background="#4C76FF" more-color="#FFFFFF"></mu-avatar-group>

属性 ​

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

头像 ​

属性名称说明类型默认值
src头像图片地址，优先级最高string-
size头像尺寸，单位为 rpxnumber80
shape头像形状，可选 circle、squarestringcircle
radius圆角大小，仅在 shape 不为 circle 时生效string | number0
background背景色string-
color文字或图标颜色string-
text文字内容string-
icon图标名称，对应 mu-icon 的 namestring-
customClass自定义根节点类名string-
customStyle自定义根节点样式any-

头像组 ​

属性名称说明类型默认值
list头像列表，每项为 { src, text, icon, background, color }AvatarItemType[]-
size单个头像尺寸，单位为 rpxnumber80
shape头像形状，可选 circle、squarestringcircle
radius圆角大小，仅在 shape 不为 circle 时生效string | number0
max最多显示数量，超出部分以 +N 展示，0 表示不限制number0
overlap头像叠放重叠距离，单位为 rpx，0 时按尺寸自动计算number0
moreBackground+N 计数头像背景色stringrgba(0, 0, 0, 0.6)
moreColor+N 计数头像文字颜色string#FFFFFF
customClass自定义根节点类名string-
customStyle自定义根节点样式any-

事件 ​

组件支持以下事件。

事件名说明回调参数
click点击头像时触发（mu-avatar）event: UniEvent
click点击某个头像时触发（mu-avatar-group），+N 计数头像的索引为其在展示列表中的位置index: number

插槽 ​

组件支持以下插槽。

名称说明
default自定义头像内容（mu-avatar），当 src、text、icon 均未设置时生效