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

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

import { defineComponent, ref, computed, watchEffect } from "vue";
import { IconImage2Fill } from "birdpaper-icon";
import { isString } from "../../utils/util.js";
const _sfc_main = 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 },
  setup(props, { emit, slots }) {
    const name = "bp-image";
    const imageRef = ref();
    const loadStatus = ref("loading");
    const isLoading = computed(() => loadStatus.value === "loading");
    const isError = computed(() => loadStatus.value === "error");
    const imgStyle = computed(() => ({
      width: isString(props.width) ? props.width : `${props.width}px`,
      height: isString(props.height) ? props.height : `${props.height}px`
    }));
    const fitStyle = computed(() => {
      if (props.fit) {
        return { objectFit: props.fit };
      }
      return {};
    });
    const clsName = 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");
    };
    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
    };
  }
});
export {
  _sfc_main as default
};