uView Avatar 头像

发布时间:2024年01月08日

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

#平台差异说明

App(vue)App(nvue)H5小程序

#基本使用

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

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

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

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

copy

#头像形状

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

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

copy

#图标头像

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

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

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

copy

#文字头像(自动背景色)

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

copy

#默认头像

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

#头像组

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

<template>
    <u-avatar-group
            :urls="urls"
            size="35"
            gap="0.4"
    ></u-avatar-group>
</template>

<script>
    export default {
        data() {
            return {
                urls: [
                    'https://cdn.uviewui.com/uview/album/1.jpg',
                    'https://cdn.uviewui.com/uview/album/2.jpg',
                    'https://cdn.uviewui.com/uview/album/3.jpg',
                    'https://cdn.uviewui.com/uview/album/4.jpg',
                    'https://cdn.uviewui.com/uview/album/7.jpg',
                    'https://cdn.uviewui.com/uview/album/6.jpg',
                    'https://cdn.uviewui.com/uview/album/5.jpg'
                ]
            }
        }
</script>
文章来源:https://blog.csdn.net/m0_72196169/article/details/135464308
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。