@cqmcui/cqmcui/dist/packages/_es/Image.js

轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）

import { reactive, useSlots, computed, watch, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, createBlock, createCommentVNode, renderSlot } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
import { Image, ImageError } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
const { componentName, create } = createComponent("image");
const _sfc_main = create({
  props: {
    src: String,
    fit: {
      type: String,
      default: "fill"
    },
    position: {
      type: String,
      default: "center"
    },
    alt: {
      type: String,
      default: ""
    },
    width: {
      type: String,
      default: "center"
    },
    height: {
      type: String,
      default: ""
    },
    round: {
      type: Boolean,
      default: false
    },
    radius: [String, Number],
    showError: {
      type: Boolean,
      default: true
    },
    showLoading: {
      type: Boolean,
      default: true
    }
  },
  components: {
    Image,
    ImageError
  },
  emits: ["click", "load", "error"],
  setup(props, { emit }) {
    const state = reactive({
      loading: true,
      isError: false,
      slotLoding: useSlots().loading,
      slotError: useSlots().error
    });
    const classes = computed(() => {
      const prefixCls = componentName;
      return {
        [prefixCls]: true,
        [`${prefixCls}-round`]: props.round
      };
    });
    const stylebox = computed(() => {
      let style = {};
      if (props.width)
        style.width = pxCheck(props.width);
      if (props.height)
        style.height = pxCheck(props.height);
      if (props.radius !== void 0 && props.radius !== null) {
        style.overflow = "hidden";
        style.borderRadius = pxCheck(props.radius);
      }
      return style;
    });
    const styles = computed(() => {
      let styless = {
        objectFit: props.fit,
        objectPosition: props.position
      };
      return styless;
    });
    watch(
      () => props.src,
      (val) => {
        state.isError = false, state.loading = true;
      }
    );
    const load = () => {
      state.loading = false;
      emit("load");
    };
    const error = () => {
      state.isError = true;
      state.loading = false;
      emit("error");
    };
    const imageClick = (event) => {
      emit("click", event);
    };
    return { ...toRefs(state), imageClick, classes, styles, stylebox, error, load };
  }
});
const _hoisted_1 = ["src", "alt"];
const _hoisted_2 = {
  key: 0,
  class: "cqmc-img-loading"
};
const _hoisted_3 = {
  key: 1,
  class: "cqmc-img-error"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_Image = resolveComponent("Image");
  const _component_ImageError = resolveComponent("ImageError");
  return openBlock(), createElementBlock("view", {
    class: normalizeClass(_ctx.classes),
    style: normalizeStyle(_ctx.stylebox),
    onClick: _cache[2] || (_cache[2] = (...args) => _ctx.imageClick && _ctx.imageClick(...args))
  }, [
    createElementVNode("img", {
      class: "cqmc-img",
      src: _ctx.src,
      alt: _ctx.alt,
      onLoad: _cache[0] || (_cache[0] = (...args) => _ctx.load && _ctx.load(...args)),
      onError: _cache[1] || (_cache[1] = (...args) => _ctx.error && _ctx.error(...args)),
      style: normalizeStyle(_ctx.styles)
    }, null, 44, _hoisted_1),
    _ctx.loading ? (openBlock(), createElementBlock("view", _hoisted_2, [
      !_ctx.slotLoding ? (openBlock(), createBlock(_component_Image, {
        key: 0,
        width: "16px",
        height: "20px",
        name: "image"
      })) : createCommentVNode("", true),
      renderSlot(_ctx.$slots, "loading")
    ])) : createCommentVNode("", true),
    _ctx.isError && !_ctx.loading ? (openBlock(), createElementBlock("view", _hoisted_3, [
      !_ctx.slotError ? (openBlock(), createBlock(_component_ImageError, {
        key: 0,
        width: "16px",
        height: "20px",
        name: "imageError"
      })) : createCommentVNode("", true),
      renderSlot(_ctx.$slots, "error")
    ])) : createCommentVNode("", true)
  ], 6);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};