Press UI

# Avatar

# Introduction

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

export default {
   components: {
     PressAvatar,
   }
}

# Code Demo

# Basic usage

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

# Avatar shape

Can be set to square via round to false.

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

# Avatar size

Set the size via size.

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

# Icon avatar

Set the icon avatar through icon.

<PressAvatar
   icon="star-o"
/>

<PressAvatar
   icon="like-o"
/>

# Text avatar

Set text avatar via text.

<PressAvatar
   text="Y"
/>

<PressAvatar
   text="G"
/>

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

# Failed to load

If loading fails, the default avatar will be displayed.

<PressAvatar />

# Avatar group

Use the PressAvatarGroup component to display avatar groups.

<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

# Props

Parameters Description Type Default value
src Avatar image path string -
round Whether it is round boolean false
size size string | number 40
mode Cropping, scaling mode string scaleToFill
text Displayed text string -
background-color background color string #c0c4cc
color Text color string #fff
font-size text size string | number 18
mp-avatar Whether to display the mini program avatar, only valid for Baidu, WeChat, and QQ mini programs boolean false
random-background-color Whether to use random background color boolean false
default-url Custom loading failed avatar string -
color-index Index specifying the background color number -1
name component identifier string -
custom-style custom style string -

# Events

Event name Description Parameters
click Click on the avatar name
横屏

← Badge →