Avatar 头像

用图标、图片或者字符的形式展示用户或事物信息。

基础用法

通过 shape 和 size 设置头像的形状和大小。

circle

square

展示新消息数量。

<template>
  <jp-row class="demo-avatar demo-basic">
    <jp-col :span="12">
      <div class="sub-title">circle</div>
      <div class="demo-basic--circle">
        <div class="block"><jp-avatar :size="50" :src="circleUrl"></jp-avatar></div>
        <div class="block" v-for="size in sizeList" :key="size">
          <jp-avatar :size="size" :src="circleUrl"></jp-avatar>
        </div>
      </div>
    </jp-col>
    <jp-col :span="12">
      <div class="sub-title">square</div>
      <div class="demo-basic--circle">
        <div class="block"><jp-avatar shape="square" :size="50" :src="squareUrl"></jp-avatar></div>
        <div class="block" v-for="size in sizeList" :key="size">
          <jp-avatar shape="square" :size="size" :src="squareUrl"></jp-avatar>
        </div>
      </div>
    </jp-col>
  </jp-row>
</template>
<script>
export default {
  data() {
    return {
      circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
      sizeList: ['large', 'medium', 'small']
    }
  }
}
</script>
<style scoped lang="less">
.demo-basic--circle {
  display: flex;
  align-items: center;
  margin-top: 20px;
  .block {
    margin-left: 12px;
  }
}
</style>

显示代码

展示类型

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

user

展示新消息数量。

<template>
  <div class="demo-type">
    <div>
      <jp-avatar icon="jp-icon-user-solid"></jp-avatar>
    </div>
    <div>
      <jp-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></jp-avatar>
    </div>
    <div>
      <jp-avatar>user</jp-avatar>
    </div>
  </div>
</template>
<style scoped lang="scss">
.demo-type {
  display: flex;
  align-items: center;
  div {
    flex: 1;
  }
}
</style>

显示代码

Attributes

参数	说明	类型	可选值	默认值
icon	设置头像的图标类型，参考 Icon 组件	string
size	设置头像的大小	number/string	number / large / medium / small	large
shape	设置头像的形状	string	circle / square	circle
src	图片头像的资源地址	string
srcSet	以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像	string
alt	描述图像的替换文本	string
fit	当展示类型为图片的时候，设置图片如何适应容器框	string	fill / contain / cover / none / scale-down	cover

Events

事件名	说明	回调参数
error	图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为	(e: Event)

Slot

名称	说明
default	自定义头像展示内容