056_Avatar头像

1. Avatar头像

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

1.2. 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

1.3. Events

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

1.4. Slots

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

2. Avatar头像例子

2.1. 使用脚手架新建一个名为element-ui-avatar折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js 

import Vue from 'vue'
import VueRouter from 'vue-router'
import Avatar from '../components/Avatar.vue'
import TypeAvatar from '../components/TypeAvatar.vue'
import ImgAvatar from '../components/ImgAvatar.vue'
import FitAvatar from '../components/FitAvatar.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/Avatar' },
  { path: '/Avatar', component: Avatar },
  { path: '/TypeAvatar', component: TypeAvatar },
  { path: '/ImgAvatar', component: ImgAvatar },
  { path: '/FitAvatar', component: FitAvatar }
]

const router = new VueRouter({
  routes
})

export default router

2.3. 在components下创建Avatar.vue

<template>
  <div>
    <h1>基本用法</h1>
    <h4>通过shape和size设置头像的形状和大小。</h4>
    <el-row>
      <el-col :span="6">
        <div class="sub-title">circle</div>
        <div class="demo-basic--circle">
          <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
          <div class="block" v-for="size in sizeList" :key="size">
            <el-avatar :size="size" :src="circleUrl"></el-avatar>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="sub-title">square</div>
        <div class="demo-basic--circle">
          <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
          <div class="block" v-for="size in sizeList" :key="size">
            <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</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>
/deep/.sub-title {
  width: 100%;
  text-align: center;
}
/deep/.block {
  display: inline-flex;
  width: 25%;
  height: 100px;
  justify-content: center;
  vertical-align: middle;
  align-items: center;
}
</style>

2.4. 在components下创建TypeAvatar.vue

<template>
  <div>
    <h1>展示类型</h1>
    <h4>支持三种类型: 图标、图片和字符。</h4>
    <el-avatar icon="el-icon-user-solid"></el-avatar>
    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
    <el-avatar> user </el-avatar>
  </div>
</template>

2.5. 在components下创建ImgAvatar.vue

<template>
  <div>
    <h1>图片加载失败的fallback行为</h1>
    <h4>当展示类型为图片的时候, 图片加载失败的fallback行为。</h4>
    <el-avatar :size="60" src="https://empty" @error="errorHandler">
      <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
    </el-avatar>
  </div>
</template>

<script>
export default {
  methods: {
    errorHandler () {
      return true
    }
  }
}
</script>

2.6. 在components下创建FitAvatar.vue

<template>
  <div>
    <h1>图片如何适应容器框</h1>
    <h4>当展示类型为图片的时候, 使用fit属性定义图片如何适应容器框, 同原生object-fit。</h4>
    <div class="block" v-for="fit in fits" :key="fit">
      <span class="title">{{ fit }}</span>
      <el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
    }
  }
}
</script>

<style scoped>
/deep/.block {
  display: inline-block;
  width: 200px;
  text-align: center;
}
/deep/.title {
  display: block;
  height: 30px;
  line-height: 30px;
}
</style>

2.7. 运行项目, 访问http://localhost:8080/#/Avatar

2.8. 运行项目, 访问http://localhost:8080/#/TypeAvatar

2.9. 运行项目, 访问http://localhost:8080/#/ImgAvatar

2.10. 运行项目, 访问http://localhost:8080/#/FitAvatar