nano-ui

Avatar 头像 ​

Avatar 组件用于展示用户头像、图标或文字的场景。

基础用法 ​

支持三种类型：图片、图标和文字。

U

<template>
  <div class="demo-avatar">
    <n-avatar>U</n-avatar>
    <n-avatar src="../nano.png" />
    <n-avatar icon="user" />
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  gap: 20px;
  align-items: center;
}
</style>

不同尺寸 ​

Avatar 组件提供三种尺寸：small、default、large，也支持自定义尺寸。

S
D
L
60

<template>
  <div class="demo-avatar">
    <n-avatar size="small">S</n-avatar>
    <n-avatar>D</n-avatar>
    <n-avatar size="large">L</n-avatar>
    <n-avatar :size="60">60</n-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  gap: 20px;
  align-items: center;
}
</style>

不同形状 ​

Avatar 支持两种形状：circle(默认)、square。

圆
方

<template>
  <div class="demo-avatar">
    <n-avatar shape="circle">圆</n-avatar>
    <n-avatar shape="square">方</n-avatar>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  gap: 20px;
  align-items: center;
}
</style>

图标头像 ​

可以使用 icon 属性来显示不同类型的图标。

<template>
  <div class="demo-avatar">
    <n-avatar icon="user" />
    <n-avatar icon="star" type="primary" />
    <n-avatar icon="heart" type="success" />
    <n-avatar icon="bell" type="warning" />
    <n-avatar icon="trash" type="danger" />
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  gap: 20px;
  align-items: center;
}
</style>

图片填充 ​

当使用图片作为头像时，可以设置 fit 来指定图片的填充方式。

fill
contain
cover
none
scale-down

<template>
  <div class="demo-avatar">
    <div class="demo-avatar-item">
      <span class="demo-avatar-title">fill</span>
      <n-avatar src="../nano.png" fit="fill" />
    </div>
    <div class="demo-avatar-item">
      <span class="demo-avatar-title">contain</span>
      <n-avatar src="../nano.png" fit="contain" />
    </div>
    <div class="demo-avatar-item">
      <span class="demo-avatar-title">cover</span>
      <n-avatar src="../nano.png" fit="cover" />
    </div>
    <div class="demo-avatar-item">
      <span class="demo-avatar-title">none</span>
      <n-avatar src="../nano.png" fit="none" />
    </div>
    <div class="demo-avatar-item">
      <span class="demo-avatar-title">scale-down</span>
      <n-avatar src="../nano.png" fit="scale-down" />
    </div>
  </div>
</template>

<style scoped>
.demo-avatar {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.demo-avatar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.demo-avatar-title {
  font-size: 14px;
  color: var(--nano-text-color-secondary);
}
</style>

API ​

Props ​

名称说明类型默认值
size头像大小，可选值为 small、default、large 或具体数字'small' | 'default' | 'large' | numberdefault
shape头像形状'circle' | 'square'circle
icon设置头像的图标类型string-
src图片头像的资源地址string-
alt图片头像的替代文本string-
fit当展示类型为图片时，设置图片如何适应容器'fill' | 'contain' | 'cover' | 'none' | 'scale-down'cover

Events ​

事件名说明类型
error图片类型头像加载失败时触发(e: Event) => void

Slots ​

插槽名说明作用域参数
default自定义头像内容-

样式变量 ​

变量名说明默认值
--nano-avatar-bg-color头像背景色var(--nano-fill-color-lighter)
--nano-avatar-text-color头像文字颜色var(--nano-text-color-regular)
--nano-avatar-border-radius方形头像的圆角大小var(--nano-border-radius-base)
--nano-avatar-size-large大尺寸头像的大小56px
--nano-avatar-size-default默认尺寸头像的大小40px
--nano-avatar-size-small小尺寸头像的大小24px
--nano-avatar-font-size-large大尺寸头像的字体大小var(--nano-font-size-large)
--nano-avatar-font-size-default默认尺寸头像的字体大小var(--nano-font-size-base)
--nano-avatar-font-size-small小尺寸头像的字体大小var(--nano-font-size-small)
--nano-avatar-icon-size-large大尺寸头像的图标大小28px
--nano-avatar-icon-size-default默认尺寸头像的图标大小20px
--nano-avatar-icon-size-small小尺寸头像的图标大小12px