AsUI

Avatar头像

# 基础用法

circle
square
<template>
  <div class="t-basic-avatar-area">
    <div>
      <div class="sub-title">circle</div>
      <div class="demo-basic--circle">
        <div class="block"><as-avatar :size="50" :src="circleUrl"></as-avatar></div>
        <div class="block" v-for="size in sizeList" :key="size">
          <as-avatar :size="size" :src="circleUrl"></as-avatar>
        </div>
      </div>
    </div>
    <div>
      <div class="sub-title">square</div>
      <div class="demo-basic--circle">
        <div class="block"><as-avatar shape="square" :size="50" :src="squareUrl"></as-avatar></div>
        <div class="block" v-for="size in sizeList" :key="size">
          <as-avatar shape="square" :size="size" :src="squareUrl"></as-avatar>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "t-basic-avatar",
  data () {
    return {
      circleUrl: "https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304",
      squareUrl: "https://images.pexels.com/photos/33109/fall-autumn-red-season.jpg?fit=crop&crop=entropy&w=3456&h=2304",
      sizeList: ["large", "medium", "small"]
    }
  }
}
</script>
<style>
.t-basic-avatar-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.t-basic-avatar-area>div{
  width: 40%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
}
.demo-basic--circle{
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  margin-top: 10px;
}
@media screen and (max-width: 900px) {
  .t-basic-avatar-area>div{
    width: 100%;
    margin-top: 10px;
  }
}
</style>
Expand Copy

# 展示类型

user
<template>
  <div class="t-display-avatar-area">
    <div>
      <as-avatar icon="as-icon-user-solid"></as-avatar>
    </div>
    <div>
      <as-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></as-avatar>
    </div>
    <div>
      <as-avatar>user</as-avatar>
    </div>
  </div>
</template>
<script>
export default {
  name: "t-display-avatar",
}
</script>
<style>
.t-display-avatar-area {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
</style>
Expand Copy

# 图片加载失败的fallback行为

当展示类型为图片的时候，图片加载失败的fallback行为

<template>
  <div class="t-fallback-avatar-area">
    <as-avatar :size="60" src="https://empty" @error="errorHandler">
      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
    </as-avatar>
  </div>
</template>
<script>
export default {
  name: "t-fallback-avatar",
  methods: {
    errorHandler() {
      return true
    }
  }
}
</script>
<style>
</style>
Expand Copy

# Attributes

参数 默认值 说明
icon -- 设置头像的图标类型,参考Icon 组件,类型为String
size large 设置头像的大小,类型为Number/String,可选值为number/large/medium/small
shape circle 设置头像的形状,类型为String,可选值为circle/square
src -- 图片头像的资源地址,类型为String
alt -- 描述图像的替换文本,类型为String

# Slot

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

# Events

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

← Badge标记 →