fangguo-component 1.1.4 → 1.2.0

package/dist/ViewImg-Bg1AQ0T6.js

@@ -0,0 +1,247 @@
+import './ViewImg.css';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { defineComponent, useAttrs, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, withDirectives, createElementVNode, mergeProps, vShow, renderSlot, createCommentVNode, createBlock, toDisplayString } from "vue";
+import { I as ImgViewerStore } from "./imgViewerStore-C5n16uYa.js";
+import { D as DEFAULT_ORIGINAL_TOOLBAR, k as DEFAULT_TOOLBAR_ICON_COLOR, j as DEFAULT_TOOLBAR_BG_COLOR, g as DEFAULT_PREVIEW_SHOW_PROGRESS, d as DEFAULT_PREVIEW_MAX_SCALE, e as DEFAULT_PREVIEW_MIN_SCALE, f as DEFAULT_PREVIEW_SCALE, i as DEFAULT_PREVIEW_ZOOM_RATE, a as DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE, b as DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL, c as DEFAULT_PREVIEW_INFINITE, h as DEFAULT_PREVIEW_TELEPORTED } from "./types-BNFeGRer.js";
+import { n as networkKey, i as imgUrlConfigKey, m as montageImgUrl } from "./montageImgUrl-CwgYnB2h.js";
+import { F as FgErrorImage } from "./ErrorImage-CFVt1ht_.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
+const _hoisted_1 = ["src", "loading"];
+const _hoisted_2 = {
+  key: 0,
+  class: "fg-view-img__placeholder"
+};
+const _hoisted_3 = {
+  key: 1,
+  class: "fg-view-img__error"
+};
+const _hoisted_4 = { class: "fg-view-img__error-default" };
+const _hoisted_5 = {
+  key: 1,
+  class: "fg-view-img__error-text"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
+  inheritAttrs: false
+}), {
+  __name: "ViewImg",
+  props: {
+    src: { default: "" },
+    fit: { default: "" },
+    lazy: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    preview: { type: Boolean, default: false },
+    previewSrcList: { default: () => [] },
+    initialIndex: { default: void 0 },
+    defImgPreviewIndex: { default: void 0 },
+    infinite: { type: Boolean, default: DEFAULT_PREVIEW_INFINITE },
+    zIndex: { default: void 0 },
+    hideOnClickModal: { type: Boolean, default: DEFAULT_PREVIEW_HIDE_ON_CLICK_MODAL },
+    closeOnPressEscape: { type: Boolean, default: DEFAULT_PREVIEW_CLOSE_ON_PRESS_ESCAPE },
+    previewTeleported: { type: Boolean, default: void 0 },
+    teleported: { type: Boolean, default: void 0 },
+    zoomRate: { default: DEFAULT_PREVIEW_ZOOM_RATE },
+    scale: { default: DEFAULT_PREVIEW_SCALE },
+    minScale: { default: DEFAULT_PREVIEW_MIN_SCALE },
+    maxScale: { default: DEFAULT_PREVIEW_MAX_SCALE },
+    showProgress: { type: Boolean, default: DEFAULT_PREVIEW_SHOW_PROGRESS },
+    toolbarBgColor: { default: DEFAULT_TOOLBAR_BG_COLOR },
+    backgroundColor: { default: "" },
+    toolbarIconColor: { default: DEFAULT_TOOLBAR_ICON_COLOR },
+    simpleExtraTools: { default: () => [] },
+    renderExtraTools: { default: null },
+    originalToolbar: { default: () => [...DEFAULT_ORIGINAL_TOOLBAR] },
+    errorColor: { default: "#f5f5f5" },
+    errorOffset: { default: 0 },
+    errorText: { default: "" },
+    ossProcess: { type: Boolean, default: true },
+    ossLinks: { default: void 0 },
+    imgSize: { default: () => ({}) },
+    previewStripQuery: { type: Boolean, default: true }
+  },
+  emits: ["load", "error", "retry", "show", "close", "switch"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const displaySrc = ref("");
+    const retried = ref(false);
+    const internalLoading = ref(false);
+    const loadError = ref(false);
+    const imgAttrs = computed(() => {
+      const _a = attrs, { class: _, style: __ } = _a, rest = __objRest(_a, ["class", "style"]);
+      return rest;
+    });
+    const imgStyle = computed(() => {
+      if (!props.fit) return {};
+      return { objectFit: props.fit };
+    });
+    const showPlaceholder = computed(
+      () => !!props.src && (props.loading || internalLoading.value) && !loadError.value
+    );
+    const previewEnabled = computed(() => (props.preview || (props.previewSrcList || []).length > 0) && !!displaySrc.value && !loadError.value);
+    const previewUrlList = computed(() => {
+      const rawList = props.previewSrcList.length ? props.previewSrcList : props.src ? [props.src] : [];
+      return rawList.map((url) => applyPreviewUrlFallback(url));
+    });
+    const previewInitialIndex = computed(() => {
+      if (props.defImgPreviewIndex != null) return props.defImgPreviewIndex;
+      if (props.initialIndex != null) return props.initialIndex;
+      const index = previewUrlList.value.indexOf(applyPreviewUrlFallback(props.src));
+      return index >= 0 ? index : 0;
+    });
+    const resolvedToolbarBgColor = computed(() => props.toolbarBgColor || props.backgroundColor || DEFAULT_TOOLBAR_BG_COLOR);
+    const resolvedPreviewTeleported = computed(
+      () => {
+        var _a, _b;
+        return (_b = (_a = props.previewTeleported) != null ? _a : props.teleported) != null ? _b : DEFAULT_PREVIEW_TELEPORTED;
+      }
+    );
+    function stripQueryParams(url) {
+      const index = url.indexOf("?");
+      return index === -1 ? url : url.slice(0, index);
+    }
+    function resolveImgUrl(url, imgSize) {
+      if (!props.ossProcess) return url;
+      return montageImgUrl(url, imgSize, props.ossLinks ? { ossLinks: props.ossLinks } : void 0);
+    }
+    function applyPreviewUrlFallback(url) {
+      if (!props.previewStripQuery || !url) return url;
+      return stripQueryParams(url);
+    }
+    function resetState(src) {
+      retried.value = false;
+      loadError.value = false;
+      internalLoading.value = !!src;
+      displaySrc.value = resolveImgUrl(src, props.imgSize);
+    }
+    function handleLoad(event) {
+      internalLoading.value = false;
+      loadError.value = false;
+      emit("load", event);
+    }
+    function markLoadFailed(event) {
+      internalLoading.value = false;
+      loadError.value = true;
+      emit("error", event);
+    }
+    function handleError(event) {
+      if (retried.value) {
+        markLoadFailed(event);
+        return;
+      }
+      const stripped = stripQueryParams(displaySrc.value);
+      if (stripped === displaySrc.value) {
+        markLoadFailed(event);
+        return;
+      }
+      const urlBefore = displaySrc.value;
+      retried.value = true;
+      internalLoading.value = true;
+      displaySrc.value = stripped;
+      emit("retry", { from: urlBefore, to: stripped });
+    }
+    function handlePreviewClick() {
+      if (!previewEnabled.value || !previewUrlList.value.length) return;
+      ImgViewerStore().showImgViewer({
+        previewImgList: previewUrlList.value,
+        defImgPreviewIndex: previewInitialIndex.value,
+        toolbarBgColor: resolvedToolbarBgColor.value,
+        toolbarIconColor: props.toolbarIconColor,
+        infinite: props.infinite,
+        zIndex: props.zIndex,
+        hideOnClickModal: props.hideOnClickModal,
+        closeOnPressEscape: props.closeOnPressEscape,
+        teleported: resolvedPreviewTeleported.value,
+        zoomRate: props.zoomRate,
+        scale: props.scale,
+        minScale: props.minScale,
+        maxScale: props.maxScale,
+        showProgress: props.showProgress,
+        simpleExtraTools: props.simpleExtraTools,
+        renderExtraTools: props.renderExtraTools,
+        originalToolbar: props.originalToolbar,
+        onShow: (payload) => emit("show", payload),
+        onClose: () => emit("close"),
+        onSwitch: (index) => emit("switch", index)
+      });
+    }
+    watch(
+      [() => props.src, () => props.ossProcess, () => props.ossLinks, () => props.imgSize, networkKey, imgUrlConfigKey],
+      ([src]) => {
+        resetState(src);
+      },
+      { immediate: true, deep: true }
+    );
+    __expose({
+      displaySrc,
+      retried
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        class: normalizeClass(["fg-view-img", unref(attrs).class]),
+        style: normalizeStyle(unref(attrs).style)
+      }, [
+        withDirectives(createElementVNode("img", mergeProps({
+          class: ["fg-view-img__inner", { "fg-view-img__inner--preview": previewEnabled.value }]
+        }, imgAttrs.value, {
+          src: displaySrc.value || void 0,
+          loading: __props.lazy ? "lazy" : "eager",
+          style: imgStyle.value,
+          onLoad: handleLoad,
+          onError: handleError,
+          onClick: handlePreviewClick
+        }), null, 16, _hoisted_1), [
+          [vShow, !loadError.value]
+        ]),
+        showPlaceholder.value ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "placeholder", {}, void 0, true)
+        ])) : createCommentVNode("", true),
+        loadError.value ? (openBlock(), createElementBlock("span", _hoisted_3, [
+          renderSlot(_ctx.$slots, "error", {}, () => [
+            createElementVNode("div", _hoisted_4, [
+              !__props.errorText ? (openBlock(), createBlock(unref(FgErrorImage), {
+                key: 0,
+                color: __props.errorColor,
+                offset: __props.errorOffset,
+                class: "fg-view-img__error-icon"
+              }, null, 8, ["color", "offset"])) : (openBlock(), createElementBlock("span", _hoisted_5, toDisplayString(__props.errorText), 1))
+            ])
+          ], true)
+        ])) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+}));
+const FgViewImg = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-498a112d"]]);
+export {
+  FgViewImg as F
+};

package/dist/ViewImg.css

@@ -0,0 +1,56 @@
+.fg-view-img[data-v-498a112d] {
+  display: block;
+  position: relative;
+  overflow: hidden;
+  min-width: 0;
+  min-height: 0;
+  vertical-align: top;
+  line-height: 0;
+}
+.fg-view-img__inner[data-v-498a112d] {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.fg-view-img__inner--preview[data-v-498a112d] {
+  cursor: zoom-in;
+}
+.fg-view-img__placeholder[data-v-498a112d],
+.fg-view-img__error[data-v-498a112d] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #f5f7fa;
+}
+.fg-view-img__error[data-v-498a112d] .error-image {
+  width: 100%;
+  height: 100%;
+}
+.fg-view-img__error-default[data-v-498a112d] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px;
+  box-sizing: border-box;
+}
+.fg-view-img__error-icon[data-v-498a112d] {
+  flex: none;
+  width: 56%;
+  height: 56%;
+  max-width: 80px;
+  max-height: 80px;
+}
+.fg-view-img__error-text[data-v-498a112d] {
+  font-size: 13px;
+  line-height: 1.4;
+  color: #909399;
+  text-align: center;
+  word-break: break-all;
+}

package/dist/ViewImgPopover-b9PDEYbP.js

@@ -0,0 +1,275 @@
+import './ViewImgPopover.css';var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { ElWatermark } from "element-plus/es";
+import { defineComponent, useAttrs, ref, computed, openBlock, createBlock, withCtx, createElementBlock, Fragment, normalizeStyle, createSlots, renderSlot, createVNode, createCommentVNode, mergeProps, unref } from "vue";
+import { L as LazyPopover } from "./LazyPopover-7ebuh-QG.js";
+import { F as FgViewImg } from "./ViewImg-Bg1AQ0T6.js";
+import { m as montageImgUrl } from "./montageImgUrl-CwgYnB2h.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
+const HOVER_POPOVER_PADDING = 10;
+const HOVER_POPOVER_MAX_HEIGHT = 400;
+const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
+  inheritAttrs: false
+}), {
+  __name: "ViewImgPopover",
+  props: {
+    src: { default: "" },
+    fit: {},
+    lazy: { type: Boolean },
+    loading: { type: Boolean },
+    preview: { type: Boolean },
+    previewSrcList: {},
+    initialIndex: {},
+    defImgPreviewIndex: {},
+    infinite: { type: Boolean },
+    zIndex: {},
+    hideOnClickModal: { type: Boolean },
+    closeOnPressEscape: { type: Boolean },
+    previewTeleported: { type: Boolean },
+    teleported: { type: Boolean },
+    zoomRate: {},
+    scale: {},
+    minScale: {},
+    maxScale: {},
+    showProgress: { type: Boolean },
+    toolbarBgColor: {},
+    backgroundColor: {},
+    toolbarIconColor: {},
+    simpleExtraTools: {},
+    renderExtraTools: {},
+    originalToolbar: {},
+    errorColor: {},
+    errorOffset: {},
+    errorText: {},
+    ossProcess: { type: Boolean },
+    ossLinks: {},
+    imgSize: {},
+    previewStripQuery: { type: Boolean },
+    hoverSrc: { default: "" },
+    hoverImgSize: { default: void 0 },
+    hoverPopoverProps: { default: () => ({}) },
+    isShowWatermark: { type: Boolean, default: false },
+    waterMarkTitle: { default: "" }
+  },
+  emits: ["load", "error", "retry", "show", "close", "switch"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const attrs = useAttrs();
+    const viewImgRef = ref(null);
+    const viewImgProps = computed(() => {
+      const _a = props, {
+        hoverSrc: _h,
+        hoverImgSize: _hi,
+        hoverPopoverProps: _hp,
+        isShowWatermark: _w,
+        waterMarkTitle: _wt
+      } = _a, rest = __objRest(_a, [
+        "hoverSrc",
+        "hoverImgSize",
+        "hoverPopoverProps",
+        "isShowWatermark",
+        "waterMarkTitle"
+      ]);
+      return rest;
+    });
+    function mergePopperStyle(base, extra) {
+      if (!extra) return base;
+      if (typeof extra === "string") return extra;
+      return __spreadValues(__spreadValues({}, base), extra);
+    }
+    const HOVER_POPOVER_MAX_HEIGHT_CSS = `${HOVER_POPOVER_MAX_HEIGHT}px`;
+    const HOVER_IMAGE_MAX_HEIGHT_CSS = `${HOVER_POPOVER_MAX_HEIGHT - HOVER_POPOVER_PADDING * 2}px`;
+    const hoverPopoverPropsMerged = computed(() => {
+      var _a;
+      const _b = (_a = props.hoverPopoverProps) != null ? _a : {}, { popperStyle: userPopperStyle, popperClass: userPopperClass } = _b, restHoverPopoverProps = __objRest(_b, ["popperStyle", "popperClass"]);
+      const popperClass = [userPopperClass, "fg-view-img-popover"].filter(Boolean).join(" ");
+      return __spreadValues({
+        placement: "right",
+        trigger: "hover",
+        width: 400,
+        teleported: true,
+        popperClass,
+        popperStyle: mergePopperStyle(
+          {
+            maxHeight: HOVER_POPOVER_MAX_HEIGHT_CSS,
+            overflow: "hidden",
+            padding: `${HOVER_POPOVER_PADDING}px`,
+            boxSizing: "border-box"
+          },
+          userPopperStyle
+        )
+      }, restHoverPopoverProps);
+    });
+    function stripQueryParams(url) {
+      const index = url.indexOf("?");
+      return index === -1 ? url : url.slice(0, index);
+    }
+    function resolveImgUrl(url, imgSize) {
+      if (!props.ossProcess) return url;
+      return montageImgUrl(url, imgSize, props.ossLinks ? { ossLinks: props.ossLinks } : void 0);
+    }
+    function applyPreviewUrlFallback(url) {
+      if (!props.previewStripQuery || !url) return url;
+      return stripQueryParams(url);
+    }
+    function resolvePreviewImgUrl(url, imgSize) {
+      return applyPreviewUrlFallback(resolveImgUrl(url, imgSize));
+    }
+    function resolveViewImgDisplaySrc() {
+      var _a;
+      const fromRef = (_a = viewImgRef.value) == null ? void 0 : _a.displaySrc;
+      if (fromRef) return fromRef;
+      if (!props.src) return "";
+      return resolveImgUrl(props.src, props.imgSize);
+    }
+    const hoverPreviewSrc = computed(() => {
+      var _a, _b, _c;
+      const displaySrc = resolveViewImgDisplaySrc();
+      const retried = (_b = (_a = viewImgRef.value) == null ? void 0 : _a.retried) != null ? _b : false;
+      if (props.hoverSrc) {
+        return resolvePreviewImgUrl(props.hoverSrc, (_c = props.hoverImgSize) != null ? _c : props.imgSize);
+      }
+      if (!props.src) return displaySrc || "";
+      if (!props.hoverImgSize) return displaySrc || "";
+      let url = resolveImgUrl(props.src, props.hoverImgSize);
+      if (retried) url = stripQueryParams(url);
+      return applyPreviewUrlFallback(url);
+    });
+    const hoverImgStyle = computed(() => ({
+      display: "block",
+      maxWidth: "100%",
+      maxHeight: HOVER_IMAGE_MAX_HEIGHT_CSS,
+      width: "auto",
+      height: "auto",
+      minWidth: "120px",
+      minHeight: "120px",
+      objectFit: "contain"
+    }));
+    return (_ctx, _cache) => {
+      const _component_el_watermark = ElWatermark;
+      return openBlock(), createBlock(LazyPopover, {
+        class: "fg-view-img-popover__trigger",
+        props: hoverPopoverPropsMerged.value
+      }, {
+        reference: withCtx(() => [
+          createVNode(FgViewImg, mergeProps({
+            ref_key: "viewImgRef",
+            ref: viewImgRef,
+            class: unref(attrs).class,
+            style: unref(attrs).style
+          }, viewImgProps.value, {
+            onLoad: _cache[0] || (_cache[0] = (e) => emit("load", e)),
+            onError: _cache[1] || (_cache[1] = (e) => emit("error", e)),
+            onRetry: _cache[2] || (_cache[2] = (p) => emit("retry", p)),
+            onShow: _cache[3] || (_cache[3] = (p) => emit("show", p)),
+            onClose: _cache[4] || (_cache[4] = ($event) => emit("close")),
+            onSwitch: _cache[5] || (_cache[5] = (i) => emit("switch", i))
+          }), createSlots({ _: 2 }, [
+            _ctx.$slots.placeholder ? {
+              name: "placeholder",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "placeholder", {}, void 0, true)
+              ]),
+              key: "0"
+            } : void 0,
+            _ctx.$slots.error ? {
+              name: "error",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "error", {}, void 0, true)
+              ]),
+              key: "1"
+            } : void 0
+          ]), 1040, ["class", "style"])
+        ]),
+        default: withCtx(() => [
+          hoverPreviewSrc.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+            !__props.isShowWatermark ? (openBlock(), createBlock(FgViewImg, {
+              key: 0,
+              class: "fg-view-img-popover__hover-image",
+              src: hoverPreviewSrc.value,
+              style: normalizeStyle(hoverImgStyle.value),
+              preview: false,
+              "oss-process": false,
+              "error-color": __props.errorColor,
+              "error-offset": __props.errorOffset,
+              "error-text": __props.errorText,
+              fit: "contain"
+            }, createSlots({ _: 2 }, [
+              _ctx.$slots.error ? {
+                name: "error",
+                fn: withCtx(() => [
+                  renderSlot(_ctx.$slots, "error", {}, void 0, true)
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1032, ["src", "style", "error-color", "error-offset", "error-text"])) : (openBlock(), createBlock(_component_el_watermark, {
+              key: 1,
+              class: "fg-view-img-popover__watermark",
+              content: [__props.waterMarkTitle],
+              gap: [10, 10],
+              font: { fontSize: 16, color: "rgba(0, 0, 0, 0.3)" }
+            }, {
+              default: withCtx(() => [
+                createVNode(FgViewImg, {
+                  class: "fg-view-img-popover__hover-image",
+                  src: hoverPreviewSrc.value,
+                  style: normalizeStyle(hoverImgStyle.value),
+                  preview: false,
+                  "oss-process": false,
+                  "error-color": __props.errorColor,
+                  "error-offset": __props.errorOffset,
+                  "error-text": __props.errorText,
+                  fit: "contain"
+                }, createSlots({ _: 2 }, [
+                  _ctx.$slots.error ? {
+                    name: "error",
+                    fn: withCtx(() => [
+                      renderSlot(_ctx.$slots, "error", {}, void 0, true)
+                    ]),
+                    key: "0"
+                  } : void 0
+                ]), 1032, ["src", "style", "error-color", "error-offset", "error-text"])
+              ]),
+              _: 3
+            }, 8, ["content"]))
+          ], 64)) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["props"]);
+    };
+  }
+}));
+const ViewImgPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6955cede"]]);
+export {
+  ViewImgPopover as V
+};

package/dist/ViewImgPopover.css

@@ -0,0 +1,33 @@
+.fg-view-img-popover__hover-image[data-v-6955cede] {
+  vertical-align: top;
+}
+.fg-view-img-popover__hover-image[data-v-6955cede] .fg-view-img__inner {
+  width: auto;
+  height: auto;
+  max-width: 100%;
+  max-height: 100%;
+}.fg-view-img-popover__trigger {
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+}
+.fg-view-img-popover.el-popper {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+.fg-view-img-popover.el-popper .fg-lazy-popover__content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  max-width: 100%;
+  line-height: 0;
+}
+.fg-view-img-popover.el-popper .fg-view-img-popover__watermark {
+  display: block;
+  max-width: 100%;
+  max-height: 380px;
+}