birdpaper-ui/lib/image/src/image.vue2.js

一个通用的 vue3 UI组件库。A common vue3 UI component library.

"use strict";
const vue = require("vue");
const birdpaperIcon = require("birdpaper-icon");
const util = require("../../utils/util.js");
const _sfc_main = vue.defineComponent({
  name: "Image",
  props: {
    /** 图片资源地址 */
    src: { type: String, default: "" },
    /** 图片适应类型 */
    fit: { type: String, default: "fill" },
    /** 文字描述 */
    alt: { type: String },
    /** 标题 */
    title: { type: String },
    /** 图片宽度 */
    width: { type: [String, Number] },
    /** 图片高度 */
    height: { type: [String, Number] }
  },
  emits: ["load", "error"],
  components: { IconImage2Fill: birdpaperIcon.IconImage2Fill },
  setup(props, { emit, slots }) {
    const name = "bp-image";
    const imageRef = vue.ref();
    const loadStatus = vue.ref("loading");
    const isLoading = vue.computed(() => loadStatus.value === "loading");
    const isError = vue.computed(() => loadStatus.value === "error");
    const imgStyle = vue.computed(() => ({
      width: util.isString(props.width) ? props.width : `${props.width}px`,
      height: util.isString(props.height) ? props.height : `${props.height}px`
    }));
    const fitStyle = vue.computed(() => {
      if (props.fit) {
        return { objectFit: props.fit };
      }
      return {};
    });
    const clsName = vue.computed(() => {
      let cls = [name, { "bp-image-auto-ratio": loadStatus.value === "load" }];
      return cls;
    });
    const onLoad = () => {
      loadStatus.value = "load";
      emit("load");
    };
    const onError = () => {
      loadStatus.value = "error";
      emit("error");
    };
    vue.watchEffect(() => {
      if (!props.src || !imageRef.value)
        return;
      loadStatus.value = "loading";
      imageRef.value.src = props.src;
    });
    return {
      name,
      clsName,
      imageRef,
      loadStatus,
      onLoad,
      onError,
      slots,
      imgStyle,
      fitStyle,
      isLoading,
      isError
    };
  }
});
module.exports = _sfc_main;