Avatar 头像

2024-06-30 23:51| 来源: 网络整理| 查看: 265

# Avatar 头像

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

# 平台差异说明 App（vue） App（nvue） H5 小程序 √ √ √ √ # 基本使用

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

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

export default { data() { return { src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg', text: '无头像' } } } # 头像形状 shape参数指定头像的形状，取值circle为圆形，取值square为圆角方形 export default { data() { return { src: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg' } } } # 图标头像 icon参数指定头像的图标，图标可参考icon组件 .u-demo-block__content { @include flex; align-items: center; } .u-avatar-item { margin-right: 30px; } # 文字头像（自动背景色） randomBgColor参数开启头像的自动背景色 # 默认头像

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

# 头像组

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

import { reactive } from 'vue'; // 使用 reactive 创建响应式数组 const urls = reactive([ 'https://uview-plus.jiangruyi.com/uview-plus/album/1.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/2.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/3.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/4.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/7.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/6.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/5.jpg' ]); export default { data() { return { urls: [ 'https://uview-plus.jiangruyi.com/uview-plus/album/1.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/2.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/3.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/4.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/7.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/6.jpg', 'https://uview-plus.jiangruyi.com/uview-plus/album/5.jpg' ] } } # 右侧演示页面源代码地址

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

github

gitee # API # Avatar Props 参数说明类型默认值可选值 src 头像路径，如加载失败，将会显示默认头像(不能为相对路径) String - - shape 头像形状 String circle square size 头像尺寸，可以为指定字符串(large, default, mini)，或者数值 String | Number 40 - mode 头像图片的裁剪类型，与uni的image组件的mode参数一致，如效果达不到需求，可尝试传widthFix值 String scaleToFill - text 用文字替代图片，级别优先于src String - - bg-color 背景颜色，一般显示文字时用 String #c0c4cc - color 文字颜色 String #ffffff - font-size 文字大小 String | Number 18 - icon 显示的图标 String - - mp-avatar 显示小程序头像，只对百度，微信，QQ小程序有效 Boolean false true random-bg-color 是否使用随机背景色 Boolean false true default-url 加载失败的默认头像(组件有内置默认图片) String - - color-index 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间 String | Number - - name 组件标识符 String level - # Avatar Event 事件名说明回调参数 click 头像被点击 index: 用户传递的标识符 # AvatarGroup Props 参数说明类型默认值可选值 urls 头像图片组 Array [] - maxCount 最多展示的头像数量 String | Number 5 - shape 头像形状 String circle square mode 图片裁剪模式 String aspectFill - showMore 超出maxCount时是否显示查看更多的提示 Boolean true - size 头像大小 String | Number 40 - keyName 指定从数组的对象元素中读取哪个属性作为图片地址 String - - gap 头像之间的遮挡比例（0.4代表遮挡40%） String | Number 0.5 - extraValue 需额外显示的值，如设置则优先于内部的urls.length - maxCount值 String | Number - - # AvatarGroup Event 事件名说明回调参数 showMore 头像组更多点击 -

← Gap 间隔槽 Link 超链接 →

【本文地址】

公司简介

联系我们