更新记录

1.0.0(2023-10-11) 下载此版本

头像组件上传啦~


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.5 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
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 -

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问