CreateUI

Appearance

Return to top
On this page

Avatar 头像

使用 Avatar 组件来代表人物形象，支持图片、文字或者图标的形式作为 Avatar 的内容。

基本用法

可以使用shape和size属性来设置 Avatar 的形状和大小。

circle
User
User
User
square
User
User
User
<template>
  <div>
    circle
    <c-avatar size="large">User</c-avatar>
    <c-avatar>User</c-avatar>
    <c-avatar size="small">User</c-avatar>
  </div>

  <div>
    square
    <c-avatar size="large" shape="square">User</c-avatar>
    <c-avatar shape="square">User</c-avatar>
    <c-avatar size="small" shape="square">User</c-avatar>
  </div>
</template>

<style lang="less" scoped>
div + div {
  margin-top: 20px;
}
</style>

支持类型

支持使用图片、文字来作为 Avatar 的内容。

User
<template>
  <div class="demo-row">
    <c-avatar>User</c-avatar>
  </div>
</template>

<style scoped>
.demo-row {
  display: flex;
  align-items: center;
}
</style>

API

Avatar 属性

名称说明类型默认值
sizeAvatar尺寸'large' | 'default' | 'small'——
shapeAvatar形状'circle' | 'square''circle'
src图片路径string——
icon图标路径string——

Avatar 插槽

插槽名说明
default头像自定义内容