[Element Plus 源码解析] Avatra 头像

一、组件介绍

[官网链接](组件 | Element (gitee.io))

Avatar组件展示用户头像，可以采用图标、图片或者字符3种形式。

1.1 属性

通用属性：

• size: 设置头像的大小，可以是number或string，string可选large / medium / small,默认值是large；
• shape：形状，string类型，可选circle / square,默认值是circle；

图标形式：

• icon: 使用图标，和icon组件一样，传入对应icon的class；

图片形式：

• src: 使用图片，传入图片的地址
• srcSet: 使用图片，以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像
• alt: 图片的替换文本，在图片加载失败时展示;
• fit: 当展示类型为图片的时候，设置图片如何适应容器框，会当做图片的object-fit属性使用，默认值是cover。

1.2 事件

• error 图片类头像加载失败的回调， 返回 false 会关闭组件默认的 fallback 行为

二、源码分析

2.1 template

<template>
  <span :class="avatarClass" :style="sizeStyle">
    // 图片形式
    <img
      v-if="(src || srcSet) && !hasLoadError"
      :src="src"
      :alt="alt"
      :srcset="srcSet"
      :style="fitStyle"
      @error="handleError"
    >
    // 图标形式
    <i v-else-if="icon" :class="icon"></i>
    // 文本形式
    <slot v-else></slot>
  </span>
</template>

2.2 script

<script lang="ts">
export default defineComponent({
  props: {
    size: {
      type: [Number, String] as PropType<number | string>,
      // 自定义验证函数,非生产环境下如果校验失败会抛出控制套警告
      validator(this: never, val: unknown) {
        if (typeof val === 'string') {
          return ['large', 'medium', 'small'].includes(val)
        }
        return typeof val === 'number'
      },
      default: 'large',
    },
    shape: {
      type: String,
      default: 'circle',
      validator(this: never, val: string) {
        return ['circle', 'square'].includes(val)
      },
    },
    icon: String,
    src: {
      type: String,
      default: '',
    },
    alt: String,
    srcSet: String,
    fit: {
      type: String,
      default: 'cover',
    },
  },
  emits: [ERROR_EVENT],
  setup(props, { emit }) {
    const hasLoadError = ref(false)

    const src = toRef(props, 'src')
    
    // 计算属性，控制class
    const avatarClass = computed(() => {
      const { size, icon, shape } = props
      const 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
    })
    
    // 计算属性，控制大小
    const sizeStyle = computed(() => {
      const { size } = props
      return typeof size === 'number' ? {
        height: `${size}px`,
        width: `${size}px`,
        lineHeight: `${size}px`,
      } : {}
    })
    
    // 计算属性，控制fit
    const fitStyle = computed(() => ({
      objectFit: props.fit,
    }))

    function handleError(e: Event) {
      hasLoadError.value = true
      emit(ERROR_EVENT, e)
    }
    
    // 图片src变化时，需要清除hasLoadError状态
    watch(src,()=>{
      hasLoadError.value = false
    })
    
    return {
      hasLoadError, avatarClass, sizeStyle, handleError,
      fitStyle,
    }
  },
})
</script>