element-plus/es/el-avatar/index.js

A Component Library for Vue3.0

import { defineComponent, ref, computed, openBlock, createBlock, renderSlot } from 'vue';

const ERROR_EVENT = 'error';
var script = defineComponent({
    name: 'ElAvatar',
    props: {
        size: {
            type: [Number, String],
            validator(val) {
                if (typeof val === 'string') {
                    return ['large', 'medium', 'small'].includes(val);
                }
                return typeof val === 'number';
            },
            default: 'large',
        },
        shape: {
            type: String,
            default: 'circle',
            validator(val) {
                return ['circle', 'square'].includes(val);
            },
        },
        icon: String,
        src: String,
        alt: String,
        srcSet: String,
        fit: {
            type: String,
            default: 'cover',
        },
    },
    emits: [ERROR_EVENT],
    setup(props, { emit }) {
        const hasLoadError = ref(false);
        const avatarClass = computed(() => {
            const { size, icon, shape } = props;
            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;
        });
        const sizeStyle = computed(() => {
            const { size } = props;
            return typeof size === 'number' ? {
                height: `${size}px`,
                width: `${size}px`,
                lineHeight: `${size}px`,
            } : {};
        });
        const fitStyle = computed(() => ({
            objectFit: props.fit,
        }));
        function handleError(e) {
            hasLoadError.value = true;
            emit(ERROR_EVENT, e);
        }
        return {
            hasLoadError, avatarClass, sizeStyle, handleError,
            fitStyle,
        };
    },
});

function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (openBlock(), createBlock("span", {
    class: _ctx.avatarClass,
    style: _ctx.sizeStyle
  }, [
    ((_ctx.src || _ctx.srcSet) && !_ctx.hasLoadError)
      ? (openBlock(), createBlock("img", {
          key: 0,
          src: _ctx.src,
          alt: _ctx.alt,
          srcset: _ctx.srcSet,
          style: _ctx.fitStyle,
          onError: _cache[1] || (_cache[1] = (...args) => (_ctx.handleError && _ctx.handleError(...args)))
        }, null, 44 /* STYLE, PROPS, HYDRATE_EVENTS */, ["src", "alt", "srcset"]))
      : (_ctx.icon)
        ? (openBlock(), createBlock("i", {
            key: 1,
            class: _ctx.icon
          }, null, 2 /* CLASS */))
        : renderSlot(_ctx.$slots, "default", { key: 2 })
  ], 6 /* CLASS, STYLE */))
}

script.render = render;
script.__file = "packages/avatar/src/index.vue";

script.install = (app) => {
    app.component(script.name, script);
};
const _Avatar = script;

export default _Avatar;