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