Avatar 头像 | Press UI

# Avatar 头像

# 引入

import PressAvatar from 'press-ui/press-avatar/press-avatar.vue';

export default {
  components: {
    PressAvatar,
  }
}

# 代码演示

# 基础用法

<PressAvatar src="https://mike-1255355338.cos.ap-guangzhou.myqcloud.…/article/2023/10/own_mike_0ab8e66284a3617ed9.jpeg" />

# 头像形状

可通过 round 为 false 设定为方形。

<PressAvatar
  :src="src"
  :round="false"
/>

# 头像尺寸

通过 size 设定尺寸。

<PressAvatar
  size="30"
  :src="src"
/>

# 图标头像

通过 icon 设定图标头像。

<PressAvatar
  icon="star-o"
/>

<PressAvatar
  icon="like-o"
/>

# 文字头像

通过 text 设定文字头像。

<PressAvatar
  text="Y"
/>

<PressAvatar
  text="G"
/>

<PressAvatar
  text="杨"
  random-bg-color
/>

# 加载失败

加载失败后会展示默认头像。

<PressAvatar />

# 头像组

使用 PressAvatarGroup 组件，可展示头像组。

<PressAvatarGroup
  :urls="urls"
/>

<PressAvatarGroup
  :urls="urls"
  gap="0.6"
/>

<PressAvatarGroup
  :urls="urls"
  size="50"
/>

export default {
  data() {
    return {
      urls: [
        'a.jpg',
        'b.jpg',
        'c.jpg',
        'd.jpg',
        'e.jpg',
        'f.jpg',
        'g.jpg',
      ]
    }
  }
}

# API

# Avatar Props

参数	说明	类型	默认值
src	头像图片路径	string	-
round	是否为圆形	boolean	`false`
size	尺寸	string \| number	`40`
mode	裁剪、缩放模式	string	`scaleToFill`
text	显示的文字	string	-
background-color	背景色	string	`#c0c4cc`
color	文字颜色	string	`#fff`
font-size	文字大小	string \| number	`18`
mp-avatar	是否显示小程序头像，只对百度，微信，QQ小程序有效	boolean	`false`
random-background-color	是否使用随机背景色	boolean	`false`
default-url	自定义加载失败头像	string	-
color-index	指定背景色的索引	number	`-1`
name	组件标识符	string	-
custom-style	自定义样式	string	-

# Avatar Events

事件名	说明	参数
click	点击头像	`name`

# AvatarGroup props

参数	说明	类型	默认值
urls	头像图片组	array	-
max-count	最多展示的头像数量	number	`5`
round	是否为圆形	boolean	`false`
mode	裁剪、缩放模式	string	`scaleToFill`
size	尺寸	string \| number	`40`
show-more	超出 `max-count` 时，是否显示查看更多的提示	boolean	`true`
key-name	`urls` 元素为对象时，读取哪个属性作为图片地址	string	`url`
gap	头像之间的遮挡比例（`0.4`代表遮挡`40%`）	number	`0.5`
extra-value	需额外显示的值	string	-

# AvatarGroup Events

事件名	说明	参数
showMore	点击展示更多	-

# 在线调试

横屏

← Teleport Badge →