Avatar 头像

用来代表用户或事物，支持图片、图标或字符展示。

代码演示

基本

头像有三种尺寸，两种形状可选。

<template>
<div>
    <v-avatar size="large" icon="user"></v-avatar>
    <v-avatar icon="user"></v-avatar>
    <v-avatar size="small" icon="user"></v-avatar>
</div>
<div>
    <v-avatar shape="square" size="large" icon="user"></v-avatar>
    <v-avatar shape="square" icon="user"></v-avatar>
    <v-avatar shape="square" size="small" icon="user"></v-avatar>
</div>
</template>

类型

支持三种类型：图片、Icon 以及字符，其中 Icon 和字符型可以自定义图标颜色及背景色。

<template>
<div>
    <v-avatar icon="user"></v-avatar>
    <v-avatar>U</v-avatar>
    <v-avatar>USER</v-avatar>
    <v-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></v-avatar>
    <v-avatar :style="{ color: '#f56a00', backgroundColor: '#fde3cf' }">U</v-avatar>
    <v-avatar :style="{ backgroundColor: '#87d068' }" icon="user"></v-avatar>
</div>
</template>

带徽标的头像

通常用于消息提示

<template>
<v-badge :count=1><v-avatar shape="square" icon="user"></v-avatar></v-badge>
<v-badge dot><v-avatar shape="square" icon="user"></v-avatar></v-badge>
</template>

API

Affix Props