头像

v-avatar 组件通常用于显示圆形用户头像图片。该组件允许你动态调整大小，并为响应式图像、图标和文本添加边框半径。当设置 rounded 属性为 0 时，将显示一个没有边框半径的头像。

使用

头像以最简单的形式在圆形容器中显示内容。

API

组件	描述
v-avatar	主要组件

组件结构

v-avatar 中元素的推荐放置是:

• 在默认 插槽 中放置一个 v-img 或 v-icon 组件。
• 文字性的内容也放置于默认 插槽

元素 / 区域	描述
1. 容器	Avatar 容器通常包含一个 v-icon 或 v-img 组件。

示例

属性

尺寸

size 属性允许你变更头像组件的宽高。

方形头像

rounded 属性可以移除头像组件的圆角，给予你一个方形的头像。

插槽

默认插槽

v-avatar 的默认插槽允许你渲染 v-icon 组件，图像，或者文字。搭配其他的属性，就可以打造独一无二的头像组件。

杂项

高级用法

将头像与其他组件组合在一起，你就可以构建漂亮的用户界面。

另一个例子是将头像和菜单结合起来。

个人名片

使用 rounded 属性值 0，我们可以创建一个简洁的硬线轮廓的个人名片。