el-avatar 源码解析

基本用法

<template>
  <el-avatar :size="size" :src="url"></el-avatar>
</template>

<script>
export default {
  data() {
    return {
      size: 'large',
      url: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
  }
}
</script>

源码中可以看出组件实际上由一个span元素包裹的img元素

render() {
  const { avatarClass, size } = this;

  const sizeStyle = typeof size === 'number' ? {
    height: `${size}px`,
    width: `${size}px`,
    lineHeight: `${size}px`
  } : {};

  return (
    <span class={ avatarClass } style={ sizeStyle }>
      {
        this.renderAvatar()
      }
    </span>
  );
}

renderAvatar() {
  const { icon, src, alt, isImageExist, srcSet, fit } = this;

  // 默认使用img 元素
  if (isImageExist && src) {
    return <img
      src={src}
      onError={this.handleError}
      alt={alt}
      srcSet={srcSet}
      style={{ 'object-fit': fit }}/>;
  }

  if (icon) {
    // 如果是icon的话，使用i元素渲染
    return (<i class={icon} />);
  }

  // 还可以传递default slot
  return this.$slots.default;
}

图片加载失败的 fallback 行为

如果是图片的话，加载失败，则会展示default slot

handleError() {
  const { error } = this;
  const errorFlag = error ? error() : undefined;
  if (errorFlag !== false) {
    this.isImageExist = false;
  }
}

图片如何适应容器框

使用原生的object-fix属性

object-fit 主要用途就是控制图片如何在 img 元素里面显示。它有 5 个值，分别是：

• fill：不考虑图片的比例，将图片缩小或者放大到同 img 元素同样的大小。
• cover：保持图片的比例，将图片充满整个 img 元素
• contain：保持图片的比例，让 img 元素能够包含整张图片
• none：按原始大小展示图片，如果超过 img 元素的大小，超出部分进行裁剪
• scale-down：从 'none' 或者 'contain' 属性中，选择实际展示区域较小的属性