ming-ui-plus/lib/avatar/index.js

项目地址是ming-ui，由于该名称无法上传npmjs，添加了plus修饰。 ``` yarn add ming-ui-plus -S // 或者 npm install ming-ui-plus -S ```

import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createBlock, withCtx, resolveDynamicComponent, renderSlot } from 'vue';

var script = defineComponent({
    name: "MAvatar",
    props: {
        alt: String,
        shape: {
            type: String,
            default: "square",
        },
        fit: {
            type: String,
            default: "cover",
        },
        size: {
            type: [Number, String],
            default: "default",
            validator: (val) => typeof val === "number",
        },
        src: {
            type: String,
            default: "",
        },
        icon: String,
        error: {
            type: Function,
        },
    },
    emits: ["error"],
    setup(props, { emit }) {
        const hasLoadError = ref(false);
        const compStyle = computed(() => {
            if (typeof props.size === "number") {
                return { width: props.size + "px", height: props.size + "px" };
            }
        });
        const compClass = computed(() => {
            return [
                props.shape === "circle" ? "m-avatar--circle" : "m-avatar--square",
                typeof props.size === "string" ? `m-avatar--${props.size}` : "",
            ];
        });
        const imgStyle = computed(() => {
            return { objectFit: props.fit };
        });
        const handleError = (e) => {
            hasLoadError.value = true;
            emit("error", e);
        };
        return { compStyle, compClass, imgStyle, hasLoadError, handleError };
    },
});

const _hoisted_1 = ["src", "alt"];

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_m_icon = resolveComponent("m-icon");

  return (openBlock(), createElementBlock("span", {
    class: normalizeClass(["m-avatar", _ctx.compClass]),
    style: normalizeStyle(_ctx.compStyle)
  }, [
    (_ctx.src && !_ctx.hasLoadError)
      ? (openBlock(), createElementBlock("img", {
          key: 0,
          src: _ctx.src,
          style: normalizeStyle(_ctx.imgStyle),
          alt: _ctx.alt,
          onError: _cache[0] || (_cache[0] = (...args) => (_ctx.handleError && _ctx.handleError(...args)))
        }, null, 44 /* STYLE, PROPS, HYDRATE_EVENTS */, _hoisted_1))
      : (_ctx.icon)
        ? (openBlock(), createBlock(_component_m_icon, { key: 1 }, {
            default: withCtx(() => [
              (openBlock(), createBlock(resolveDynamicComponent(_ctx.icon)))
            ]),
            _: 1 /* STABLE */
          }))
        : renderSlot(_ctx.$slots, "default", { key: 2 })
  ], 6 /* CLASS, STYLE */))
}

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

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

export { _Avatar as default };