uview-ultra v4

Appearance

Avatar 头像 ​

本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。

平台差异说明 ​

App（vue）App（nvue）H5小程序
√√√√

基本使用 ​

通过src指定头像的路径即可简单使用，如果传递了text参数，text将会优先起作用

注意： 请保证传递给src的是绝对地址，而不是相对地址，为什么呢？因为传入avatar组件的相对地址，是相对于组件的，而不是父组件(页面)，所以相对址可能会出错。

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

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				text: '无头像'
			}
		}
	}
</script>

头像形状 ​

  • shape参数指定头像的形状，取值circle为圆形，取值square为圆角方形
html
<template>
	<up-avatar :src="src" shape="square"></up-avatar>
</template>

<script>
	export default {
		data() {
			return {
				src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
			}
		}
	}
</script>

图标头像 ​

  • icon参数指定头像的图标，图标可参考icon组件
html
<view class="u-demo-block__content">
    <view class="u-avatar-item">
        <up-avatar
                icon="red-packet-fill"
                fontSize="22"
        ></up-avatar>
    </view>
    <view class="u-avatar-item">
        <up-avatar
                icon="star-fill"
                fontSize="22"
        ></up-avatar>
    </view>
</view>

<style lang="scss">
    .u-demo-block__content {
        @include flex;
        align-items: center;
    }

    .u-avatar-item {
        margin-right: 30px;
    }
</style>

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

  • randomBgColor参数开启头像的自动背景色
html
<template>
    <up-avatar
            text="北"
            fontSize="18"
            randomBgColor
    ></up-avatar>
</template>

默认头像 ​

如果头像加载失败，导致加载图片失败，将会显示一个默认的灰色头像

头像组 ​

使用up-avatar-group实现头像组

html
<template>
    <up-avatar-group
            :urls="urls"
            size="35"
            gap="0.4"
    ></up-avatar-group>
</template>
js
<script setup>  
import { reactive } from 'vue';  
  
// 使用 reactive 创建响应式数组  
const urls = reactive([  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/1.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/2.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/3.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/4.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/7.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/6.jpg',  
    'https://uview-ultra.jiangruyi.com/uview-ultra/album/5.jpg'  
]);  
</script>
js
<script>
    export default {
        data() {
            return {
                urls: [
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/1.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/2.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/3.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/4.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/7.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/6.jpg',
                    'https://uview-ultra.jiangruyi.com/uview-ultra/album/5.jpg'
                ]
            }
        }
</script>

右侧演示页面源代码地址 ​

点击以下链接以查看右侧演示页面的源码


 github  gitee

API ​

Avatar Props ​

参数说明类型默认值可选值
src头像路径，如加载失败，将会显示默认头像(不能为相对路径)String--
shape头像形状Stringcirclesquare
size头像尺寸，可以为指定字符串(large, default, mini)，或者数值String | Number40-
mode头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值StringscaleToFill-
text用文字替代图片，级别优先于srcString--
bg-color背景颜色，一般显示文字时用String#c0c4cc-
color文字颜色String#ffffff-
font-size文字大小String | Number18-
icon显示的图标String--
mp-avatar显示小程序头像，只对百度，微信，QQ小程序有效Booleanfalsetrue
random-bg-color是否使用随机背景色Booleanfalsetrue
default-url加载失败的默认头像(组件有内置默认图片)String--
color-index如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间String | Number--
name组件标识符Stringlevel-

Avatar Event ​

事件名说明回调参数
click头像被点击index: 用户传递的标识符

AvatarGroup Props ​

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

AvatarGroup Event ​

事件名说明回调参数
showMore头像组更多点击-