平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.91 |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
基本使用
通过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>
头像类型
mode
参数指定头像的类型,取值circle
为圆形,取值square
为圆角方形
<template>
<u-avatar :src="src" mode="square"></u-avatar>
</template>
<script>
export default {
data() {
return {
src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg'
}
}
}
</script>
默认头像
如果头像加载失败,导致加载图片失败,将会显示一个默认的灰色头像
属性
参数 |
说明 |
类型 |
默认值 |
可选值 |
bg-color |
背景颜色,一般显示文字时用 |
String |
#ffffff |
- |
src |
头像路径,如加载失败,将会显示默认头像 |
String |
- |
- |
size |
头像尺寸,可以为指定字符串(large, default, mini),或者数值,单位rpx |
String |
Number |
default |
- |
mode |
显示类型,见上方说明 |
String |
circle |
square |
text |
用文字替代图片,级别优先于src |
String |
- |
- |
img-mode |
头像图片的裁剪类型,与uni的image组件的mode参数一致,如效果达不到需求,可尝试传widthFix值 |
String |
aspectFill |
- |