Fusions

Appearance

Avatar 头像 ​

iPhone

此组件一般使用于某个活动的截止时间上，通过数字的变化，给用户明确的时间紧迫感，提示用户进行某一个行为操作。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

  • 通过 src 属性设置头像的路径，如果传递了 text 属性，将 text 会优先起作用

注意

请保证传递给 src 的是绝对地址，而不是相对地址，什么原因呢？ 因为传入 avatar 组件的相对地址，是相对于组件的，而不是父组件（页面），所以相对地址可能会导致报错

html
<template>
    <view>
        <fu-avatar :src="src"></fu-avatar>
        <fu-avatar :text="text"></fu-avatar>
    </view>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const src = ref('');
    const text = ref('无头像');
</script>

设置头像形状 ​

  • 通过 shape 属性设置头像的形状，可选值为 square（圆角方形）、circle（圆形）
html
<template>
    <view>
        <fu-avatar :src="src" shape="square"></fu-avatar>
    </view>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    const src = ref('');
</script>

设置图标头像 ​

  • 通过 icon 属性设置头像的图标，图标可参考 Icons 图标 组件
  • 通过 fontSize 属性设置图标的大小
  • 通过 color 属性设置图标的颜色
html
<fu-avatar icon="" fontSize="25" color=""></fu-avatar>

设置文字头像（自动背景色） ​

  • 通过 randomBgColor 属性设置开启头像的自动背景色
html
<fu-avatar text="中" fontSize="16" randomBgColor></fu-avatar>

设置头像组 ​

使用 AvatarGroup 组件可以实现头像组的展示。

html
<template>
    <fu-avatar-group :urls="groupList" size="35" gap="0.6"></fu-avatar-group>
</template>

<script setup>
    import { reactive } from 'vue';

    // data数据
    const groupList = reactive([
        '',
        '',
        '',
        '',
        '',
        ''
    ]);
</script>

API ​

Avatar Props ​

属性名说明类型默认值可选值
src头像路径，详见上方 基础用法String--
shape头像形状，详见上方 设置头像形状Stringcirclesquare
size头像大小，可以为指定字符串(large, default, mini)或数值String｜Number40-
mode头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值StringaspectFill-
text用文字替代图片，级别优先于srcString--
bgColor背景颜色，一般显示文字时用String#c4c8d0-
color文字颜色String#ffffff-
fontSize文字大小String｜Number18-
icon显示图标String--
mpAvatar显示小程序头像，只对百度，微信，QQ小程序有效Booleanfalsetrue
randomBgColor开启头像的自动背景色Booleanfalsetrue
defaultUrl加载失败的默认头像(组件有内置默认图片)String--
colorIndex如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间String｜Number--
name组件标识符String--
customStyle定义需要用到的外部样式String｜Object--

Avatar Events ​

事件名说明回调参数
click点击头像时触发() => void

AvatarGroup Props ​

属性名说明类型默认值可选值
urls头像组的图片数组Array[]-
maxCount头像组显示的最大数量String｜Number5-
shape头像形状Stringcirclesquare
mode图片裁剪模式StringaspectFill-
showMore超出maxCount时是否显示查看更多的提示Booleantruefalse
size头像大小String｜Number40-
keyName指定从数组的对象元素中读取哪个属性作为图片地址Stringurl-
gap头像之间的遮挡比例（0.4代表遮挡40%）Number0.5-
extraValue需额外显示的值，如设置则优先于内部的 urls.length - maxCount 值String｜Number--

AvatarGroup Events ​

事件名说明回调参数
showMore头像组更多点击() => void