Sard Uniapp

Appearance

在新窗口打开⤴

Avatar头像

介绍 ​

用图片、图标或字符等来展示头像、群、库等事物信息。

引入 ​

js
import Avatar from 'sard-uniapp/components/avatar/avatar.vue'
import AvatarGroup from 'sard-uniapp/components/avatar-group/avatar-group.vue'

代码演示 ​

基础使用 ​

默认展示一个人头图标。

vue
<template>
  <sar-avatar />
</template>

形状 ​

设置 shape="square" 将其改为带圆角的方形。

vue
<template>
  <sar-avatar shape="square" />
</template>

尺寸 ​

size 设置头像大小，iconSize 设置图标大小。

vue
<template>
  <sar-avatar size="96rpx" icon-size="48rpx" />
</template>

自定义样式 ​

background 设置头像背景色，color 设置图标颜色。

vue
<template>
  <sar-avatar background="var(--sar-red)" color="white" />
</template>

图片类型 ​

设置 src 图片路径将展示一个完全覆盖框框的图片。

vue
<template>
  <sar-avatar src="https://fastly.jsdelivr.net/npm/@sard/assets/pic1.jpg" />
</template>

自定义内容 ​

默认插槽配置的内容会代替默认的内容。

vue
<template>
  <sar-avatar>
    <sar-icon name="question" />
  </sar-avatar>

  <sar-avatar root-style="margin-top: 20rpx">字</sar-avatar>
</template>

额外内容 ​

extra 属性可以展示例如徽标等组件。要使徽标固定在圆角形状头像右上角边上可以使用 14.6447% 的固定值。

vue
<template>
  <sar-avatar shape="square">
    <template #extra>
      <sar-badge fixed :value="5" />
    </template>
  </sar-avatar>

  <sar-avatar root-style="margin-top: 20rpx">
    <template #extra>
      <sar-badge fixed :value="5" root-style="top: 14.6447%; right: 14.6447%" />
    </template>
  </sar-avatar>
</template>

头像组 1.24.5+ ​

把一组 Avatar 组件放置在 AvatarGroup 组件里面，可形成层叠效果的头像组。

AvatarGroup 组件需传递 total 和 max 属性，以便计算省略的头像数。

vue
<template>
  <sar-avatar-group :total="avatarList.length" :max="max">
    <sar-avatar
      v-for="(item, index) in avatarList.slice(0, max)"
      :key="index"
      :index="index"
    >
      {{ item.text }}
    </sar-avatar>
  </sar-avatar-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const avatarList = ref(
  Array(10)
    .fill(0)
    .map((_, i) => ({ text: i + 1 })),
)
const max = 5
</script>
vue
<template>
  <sar-avatar-group :total="avatarList.length" :max="max">
    <sar-avatar
      v-for="(item, index) in avatarList.slice(0, max)"
      :key="index"
      :index="index"
    >
      {{ item.text }}
    </sar-avatar>
  </sar-avatar-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const avatarList = ref(
  Array(10).fill(0).map((_, i) => ({ text: i + 1 }))
);
const max = 5;
</script>

实际头像数不超过最大数 1.24.5+ ​

实际头像数不超过最大数时，会隐藏剩余数量显示。

vue
<template>
  <sar-avatar-group :total="avatarList.length" :max="max">
    <sar-avatar
      v-for="(item, index) in avatarList.slice(0, max)"
      :key="index"
      :index="index"
    >
      {{ item.text }}
    </sar-avatar>
  </sar-avatar-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const avatarList = ref(
  Array(3)
    .fill(0)
    .map((_, i) => ({ text: i + 1 })),
)
const max = 5
</script>
vue
<template>
  <sar-avatar-group :total="avatarList.length" :max="max">
    <sar-avatar
      v-for="(item, index) in avatarList.slice(0, max)"
      :key="index"
      :index="index"
    >
      {{ item.text }}
    </sar-avatar>
  </sar-avatar-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const avatarList = ref(
  Array(3).fill(0).map((_, i) => ({ text: i + 1 }))
);
const max = 5;
</script>

覆盖面 1.24.5+ ​

使用 coverage 属性设置头像间的覆盖面，设置0时不覆盖，设置1时完全覆盖。

vue
<template>
  <sar-avatar-group :total="avatarList.length" :max="max" :coverage="0.2">
    <sar-avatar
      v-for="(item, index) in avatarList.slice(0, max)"
      :key="index"
      :index="index"
    >
      {{ item.text }}
    </sar-avatar>
  </sar-avatar-group>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const avatarList = ref(
  Array(10)
    .fill(0)
    .map((_, i) => ({ text: i + 1 })),
)
const max = 5
</script>
vue
<template>
  <sar-avatar-group :total="avatarList.length" :max="max" :coverage="0.2">
    <sar-avatar
      v-for="(item, index) in avatarList.slice(0, max)"
      :key="index"
      :index="index"
    >
      {{ item.text }}
    </sar-avatar>
  </sar-avatar-group>
</template>

<script setup lang="js">
import { ref } from "vue";
const avatarList = ref(
  Array(10).fill(0).map((_, i) => ({ text: i + 1 }))
);
const max = 5;
</script>

API ​

AvatarProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
shape头像形状'circle' | 'square''circle'
size头像尺寸string-
icon-size图标尺寸string-
src图片类型头像的图片地址string-
index 1.24.5+位于头像组中时必传，当前头像在头像组中的下标number-

AvatarSlots ​

插槽描述属性
default自定义默认内容-
extra额外内容，常用于展示徽标-

AvatarEmits ​

事件描述类型
click 1.24.5+点击时触发(event: any) => void

AvatarGroupProps 1.24.5+ ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
max最大头像展示数量，必填number-
total总的头像个数，必填number-
coverage头像间的覆盖面number0.5
show-remain是否显示剩余头像数量booleantrue
remain-text自定义剩余头像数量的内容string | boolean-

AvatarGroupSlots 1.24.5+ ​

插槽描述属性
default自定义默认内容-

AvatarGroupEmits 1.24.5+ ​

事件描述类型
remain-click 1.24.5+点击剩余数量时触发(event: any) => void

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-avatar-width: 128rpx;
  --sar-avatar-height: 128rpx;
  --sar-avatar-font-size: 64rpx;
  --sar-avatar-bg: var(--sar-secondary-bg);
  --sar-avatar-border-color: var(--sar-emphasis-bg);

  --sar-avatar-square-border-radius: var(--sar-rounded);

  --sar-avatar-remain-bg: var(--sar-mask);
  --sar-avatar-remain-color: var(--sar-white);
  --sar-avatar-remain-font-size: var(--sar-text-base);
}

Released under the MIT License.

Copyright © 2023-present wuzhitao