element源码解析(5) -- Avatar

Avatar头像,functional

props

总共8个属性,分别是

1. 尺寸size
2. 形状shape
3. 图标icon
4. 自定义图片src
5. 未加载提示alt
6. 尺寸设置图片 srcSet
7. 错误回调函数error
8. 图片object-fit样式属性值

size

可以为字符串或者数字,如果是字符串的话,那么只可以为大中小

size: {
      type: [Number, String],
      validator(val) {
        if (typeof val === 'string') {
          return ['large', 'medium', 'small'].includes(val);
        }
        return typeof val === 'number';
      }
    },

shape

形状只可能为圆或者方

shape: {
      type: String,
      default: 'circle',
      validator(val) {
        return ['circle', 'square'].includes(val);
      }
    },

其它

    icon: String,
    src: String,
    alt: String,
    srcSet: String,
    error: Function,
    fit: {
      type: String,
      default: 'cover'
    }

data

定义图片是否存在,与src和icon判断返回插槽

data() {
    return {
      isImageExist: true
    };
  },

computed

只有一个属性,就是avatarClass,根据三个条件来判断 给avatarClass返回对应样式

avatarClass() {
      const { size, icon, shape } = this;
      let classList = ['el-avatar'];

      if (size && typeof size === 'string') {
        classList.push(`el-avatar--${size}`);
      }

      if (icon) {
        classList.push('el-avatar--icon');
      }

      if (shape) {
        classList.push(`el-avatar--${shape}`);
      }

      return classList.join(' ');
    }

methods

handleError

有无错误判断函数,如果有,执行错误函数
判断错误是否存在设置图片是否存在属性
这个函数在img监听error的时候执行

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

renderAvatar

根据图片是存在和自定义图片是否存在判断用图片还是图标,都没有就返回插槽

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

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

      if (icon) {
        return (<i class={icon} />);
      }

      return this.$slots.default;
    }
  },

render

渲染函数
提取class和尺寸,借助renderAvatar()渲染

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>
    );
  }

scss

使用了模块函数mixin b和m,b是命名空间前缀el-avatar,m是分割符前缀el-avatar–circle等

@import "mixins/mixins";
@import "common/var";

@include b(avatar) {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: $--avatar-font-color;
  background: $--avatar-background-color;
  width: $--avatar-large-size;
  height: $--avatar-large-size;
  line-height: $--avatar-large-size;
  font-size: $--avatar-text-font-size;

  >img {
    display: block;
    height: 100%;
    vertical-align: middle;
  }

  @include m(circle) {
    border-radius: 50%;
  }

  @include m(square) {
    border-radius: $--avatar-border-radius;
  }

  @include m(icon) {
    font-size: $--avatar-icon-font-size;
  }

  @include m(large) {
    width: $--avatar-large-size;
    height: $--avatar-large-size;
    line-height: $--avatar-large-size;
  }

  @include m(medium) {
    width: $--avatar-medium-size;
    height: $--avatar-medium-size;
    line-height: $--avatar-medium-size;
  }

  @include m(small) {
    width: $--avatar-small-size;
    height: $--avatar-small-size;
    line-height: $--avatar-small-size;
  }
}