fangguo-component 1.2.4 → 1.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/FgCascader.css +2 -6
- package/dist/{FgCascader.vue_vue_type_style_index_0_lang-DzvTfHp4.js → FgCascader.vue_vue_type_style_index_0_lang-CtUPO8fk.js} +19 -16
- package/dist/{ViewImg-CD4QJK4R.js → ViewImg-CLRjYOUN.js} +250 -51
- package/dist/ViewImg.css +41 -12
- package/dist/{ViewImgPopover-D-1b2nEa.js → ViewImgPopover-BtFnYval.js} +70 -104
- package/dist/ViewImgPopover.css +8 -29
- package/dist/components/cascader/index.js +1 -1
- package/dist/components/index.js +3 -3
- package/dist/components/viewImg/ViewImg.vue.d.ts +21 -14
- package/dist/components/viewImg/ViewImgErrorFallback.vue.d.ts +6 -3
- package/dist/components/viewImg/defaults.d.ts +2 -2
- package/dist/components/viewImg/index.js +1 -1
- package/dist/components/viewImgPopover/ViewImgPopover.vue.d.ts +86 -70
- package/dist/components/viewImgPopover/index.js +1 -1
- package/dist/{index-rEz2pixF.js → index-DsfY1yqo.js} +2 -1
- package/dist/{index-CALlgLrT.js → index-wDrpgKQT.js} +3 -3
- package/dist/index.d.ts +1 -0
- package/dist/index.js +14 -13
- package/dist/{montageImgUrl-DP5jMHCX.js → montageImgUrl-B9ZmJ7TF.js} +35 -16
- package/dist/tools/imgUrl/imageUrl.d.ts +42 -5
- package/dist/tools/imgUrl/index.d.ts +1 -1
- package/dist/tools/imgUrl/index.js +6 -5
- package/dist/tools/index.js +8 -7
- package/package.json +2 -2
|
@@ -30,32 +30,13 @@ var __objRest = (source, exclude) => {
|
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
32
|
import { ElWatermark } from "element-plus/es";
|
|
33
|
-
import { defineComponent, useAttrs, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, Fragment, renderSlot, createBlock, createElementVNode, createSlots,
|
|
33
|
+
import { defineComponent, useAttrs, ref, computed, watch, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, Fragment, renderSlot, normalizeProps, mergeProps, createBlock, createElementVNode, createSlots, guardReactiveProps, createCommentVNode, withModifiers } from "vue";
|
|
34
34
|
import { L as LazyPopover } from "./LazyPopover-CcvilJ6U.js";
|
|
35
|
-
import { V as ViewImgErrorFallback, F as FgViewImg, u as useViewImgDefaults } from "./ViewImg-
|
|
36
|
-
import { m as montageImgUrl } from "./montageImgUrl-
|
|
35
|
+
import { V as ViewImgErrorFallback, F as FgViewImg, u as useViewImgDefaults } from "./ViewImg-CLRjYOUN.js";
|
|
36
|
+
import { h as hasPlatformImageResizeParams, m as montageImgUrl } from "./montageImgUrl-B9ZmJ7TF.js";
|
|
37
37
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.js";
|
|
38
|
-
const _hoisted_1 = {
|
|
39
|
-
key: 1,
|
|
40
|
-
class: "fg-view-img-popover__loading-icon",
|
|
41
|
-
viewBox: "0 0 1280 1024"
|
|
42
|
-
};
|
|
43
|
-
const _hoisted_2 = ["fill"];
|
|
44
|
-
const _hoisted_3 = {
|
|
45
|
-
key: 1,
|
|
46
|
-
class: "fg-view-img-popover__loading-icon",
|
|
47
|
-
viewBox: "0 0 1280 1024"
|
|
48
|
-
};
|
|
49
|
-
const _hoisted_4 = ["fill"];
|
|
50
|
-
const _hoisted_5 = {
|
|
51
|
-
key: 1,
|
|
52
|
-
class: "fg-view-img-popover__loading-icon",
|
|
53
|
-
viewBox: "0 0 1280 1024"
|
|
54
|
-
};
|
|
55
|
-
const _hoisted_6 = ["fill"];
|
|
56
38
|
const HOVER_POPOVER_PADDING = 10;
|
|
57
39
|
const HOVER_POPOVER_MAX_HEIGHT = 400;
|
|
58
|
-
const DEFAULT_LOADING_ICON_COLOR = "#cfd2d7";
|
|
59
40
|
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, {
|
|
60
41
|
inheritAttrs: false
|
|
61
42
|
}), {
|
|
@@ -86,13 +67,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
86
67
|
simpleExtraTools: {},
|
|
87
68
|
renderExtraTools: {},
|
|
88
69
|
originalToolbar: {},
|
|
89
|
-
|
|
90
|
-
errorOffset: {},
|
|
70
|
+
fallbackColor: {},
|
|
91
71
|
errorText: {},
|
|
92
72
|
ossProcess: { type: Boolean, default: true },
|
|
93
73
|
ossLinks: {},
|
|
94
74
|
imgSize: {},
|
|
95
75
|
previewStripQuery: { type: Boolean, default: true },
|
|
76
|
+
previewSideNav: { type: [Boolean, String] },
|
|
77
|
+
scrollContainer: { default: null },
|
|
96
78
|
hoverSrc: { default: "" },
|
|
97
79
|
previewSrc: { default: "" },
|
|
98
80
|
hoverImgSize: { default: void 0 },
|
|
@@ -126,6 +108,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
126
108
|
return () => props2.render(props2.payload);
|
|
127
109
|
}
|
|
128
110
|
});
|
|
111
|
+
const resolvedWaterMarkTitle = computed(() => {
|
|
112
|
+
var _a, _b;
|
|
113
|
+
return (_b = (_a = props.waterMarkTitle) != null ? _a : viewImgDefaults.waterMarkTitle) != null ? _b : "";
|
|
114
|
+
});
|
|
115
|
+
const resolvedFallbackColor = computed(
|
|
116
|
+
() => {
|
|
117
|
+
var _a, _b;
|
|
118
|
+
return ((_a = props.fallbackColor) == null ? void 0 : _a.trim()) || ((_b = props.loadingIconColor) == null ? void 0 : _b.trim()) || viewImgDefaults.loadingIconColor || "";
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
const shouldEnableReferencePreview = computed(() => {
|
|
122
|
+
var _a;
|
|
123
|
+
return props.preview || !!((_a = props.previewSrcList) == null ? void 0 : _a.length);
|
|
124
|
+
});
|
|
129
125
|
const viewImgProps = computed(() => {
|
|
130
126
|
const _a = props, {
|
|
131
127
|
hoverSrc: _h,
|
|
@@ -136,7 +132,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
136
132
|
waterMarkTitle: _wt,
|
|
137
133
|
showPreviewIcon: _spi,
|
|
138
134
|
showHoverOnError: _shoe,
|
|
139
|
-
loadingIconColor: _lic
|
|
135
|
+
loadingIconColor: _lic,
|
|
136
|
+
fallbackColor: _fc
|
|
140
137
|
} = _a, rest = __objRest(_a, [
|
|
141
138
|
"hoverSrc",
|
|
142
139
|
"previewSrc",
|
|
@@ -146,9 +143,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
146
143
|
"waterMarkTitle",
|
|
147
144
|
"showPreviewIcon",
|
|
148
145
|
"showHoverOnError",
|
|
149
|
-
"loadingIconColor"
|
|
146
|
+
"loadingIconColor",
|
|
147
|
+
"fallbackColor"
|
|
150
148
|
]);
|
|
151
149
|
return __spreadProps(__spreadValues({}, rest), {
|
|
150
|
+
fallbackColor: resolvedFallbackColor.value,
|
|
152
151
|
previewSrcList: shouldEnableReferencePreview.value ? resolvePopoverPreviewSrcList() : []
|
|
153
152
|
});
|
|
154
153
|
});
|
|
@@ -169,26 +168,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
169
168
|
const HOVER_POPOVER_MAX_HEIGHT_CSS = `${HOVER_POPOVER_MAX_HEIGHT}px`;
|
|
170
169
|
const HOVER_IMAGE_MAX_HEIGHT_CSS = `${HOVER_POPOVER_MAX_HEIGHT - HOVER_POPOVER_PADDING * 2}px`;
|
|
171
170
|
const DEFAULT_HOVER_IMG_SIZE = { h: 420 };
|
|
172
|
-
const resolvedWaterMarkTitle = computed(() => {
|
|
173
|
-
var _a, _b;
|
|
174
|
-
return (_b = (_a = props.waterMarkTitle) != null ? _a : viewImgDefaults.waterMarkTitle) != null ? _b : "";
|
|
175
|
-
});
|
|
176
|
-
const resolvedLoadingIconColor = computed(
|
|
177
|
-
() => {
|
|
178
|
-
var _a, _b;
|
|
179
|
-
return (_b = (_a = props.loadingIconColor) != null ? _a : viewImgDefaults.loadingIconColor) != null ? _b : DEFAULT_LOADING_ICON_COLOR;
|
|
180
|
-
}
|
|
181
|
-
);
|
|
182
171
|
const defaultSlotPayload = computed(() => {
|
|
183
|
-
var _a, _b
|
|
172
|
+
var _a, _b;
|
|
184
173
|
return {
|
|
185
174
|
src: props.src,
|
|
186
175
|
displaySrc: ((_a = viewImgRef.value) == null ? void 0 : _a.displaySrc) || props.src,
|
|
187
176
|
loading: !!props.loading,
|
|
188
177
|
loadError: referenceLoadError.value,
|
|
189
178
|
errorText: (_b = props.errorText) != null ? _b : "",
|
|
190
|
-
|
|
191
|
-
errorOffset: (_d = props.errorOffset) != null ? _d : 0
|
|
179
|
+
fallbackColor: resolvedFallbackColor.value
|
|
192
180
|
};
|
|
193
181
|
});
|
|
194
182
|
const isReferenceInvalid = computed(() => !props.src.trim() || referenceLoadError.value);
|
|
@@ -198,10 +186,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
198
186
|
const canShowPreviewIcon = computed(
|
|
199
187
|
() => props.showPreviewIcon && !isReferenceInvalid.value
|
|
200
188
|
);
|
|
201
|
-
const shouldEnableReferencePreview = computed(() => {
|
|
202
|
-
var _a;
|
|
203
|
-
return props.preview || !!((_a = props.previewSrcList) == null ? void 0 : _a.length);
|
|
204
|
-
});
|
|
205
189
|
const hoverPopoverPropsMerged = computed(() => {
|
|
206
190
|
var _a;
|
|
207
191
|
const _b = (_a = props.hoverPopoverProps) != null ? _a : {}, { popperStyle: userPopperStyle, popperClass: userPopperClass } = _b, restHoverPopoverProps = __objRest(_b, ["popperStyle", "popperClass"]);
|
|
@@ -223,10 +207,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
223
207
|
)
|
|
224
208
|
}, restHoverPopoverProps);
|
|
225
209
|
});
|
|
226
|
-
const resolveImgUrl = (url, imgSize) => {
|
|
227
|
-
if (!props.ossProcess) return url;
|
|
228
|
-
return montageImgUrl(url, imgSize, props.ossLinks ? { ossLinks: props.ossLinks } : void 0);
|
|
229
|
-
};
|
|
230
210
|
const stripQueryParams = (url) => {
|
|
231
211
|
const index = url.indexOf("?");
|
|
232
212
|
return index === -1 ? url : url.slice(0, index);
|
|
@@ -244,30 +224,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
244
224
|
if (!props.src.trim()) return [];
|
|
245
225
|
return [applyPreviewUrlFallback(props.src)];
|
|
246
226
|
};
|
|
247
|
-
const resolveResizeProcess = (imgSize) => {
|
|
248
|
-
const { w, h, s, l } = imgSize != null ? imgSize : {};
|
|
249
|
-
if (w) return `resize,w_${w}`;
|
|
250
|
-
if (h) return `resize,h_${h}`;
|
|
251
|
-
if (s) return `resize,s_${s}`;
|
|
252
|
-
if (l) return `resize,l_${l}`;
|
|
253
|
-
return "resize,h_420";
|
|
254
|
-
};
|
|
255
|
-
const replaceOssResizeProcess = (url, imgSize) => {
|
|
256
|
-
const resizeProcess = resolveResizeProcess(imgSize);
|
|
257
|
-
if (url.includes("x-oss-process=image/resize,")) {
|
|
258
|
-
return url.replace(/image\/resize,[^/?&#]+/, `image/${resizeProcess}`);
|
|
259
|
-
}
|
|
260
|
-
if (url.includes("x-oss-process=image/")) {
|
|
261
|
-
return url.replace("x-oss-process=image/", `x-oss-process=image/${resizeProcess}/`);
|
|
262
|
-
}
|
|
263
|
-
return "";
|
|
264
|
-
};
|
|
265
227
|
const resolveHoverImgUrl = (url, imgSize) => {
|
|
266
228
|
if (!url.trim()) return "";
|
|
267
|
-
|
|
268
|
-
const
|
|
269
|
-
if (
|
|
270
|
-
|
|
229
|
+
const options = props.ossLinks ? { ossLinks: props.ossLinks } : void 0;
|
|
230
|
+
const hasResizeParams = hasPlatformImageResizeParams(url);
|
|
231
|
+
if (hasResizeParams) {
|
|
232
|
+
return montageImgUrl(url, imgSize, options);
|
|
233
|
+
}
|
|
234
|
+
if (props.ossProcess) {
|
|
235
|
+
return montageImgUrl(url, imgSize, options);
|
|
236
|
+
}
|
|
237
|
+
return url;
|
|
271
238
|
};
|
|
272
239
|
const handleReferenceLoad = (event) => {
|
|
273
240
|
referenceLoadError.value = false;
|
|
@@ -289,8 +256,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
289
256
|
);
|
|
290
257
|
const hoverPreviewSrc = computed(() => {
|
|
291
258
|
var _a;
|
|
292
|
-
const hoverSource = props.hoverSrc || props.src;
|
|
293
|
-
if (
|
|
259
|
+
const hoverSource = (props.hoverSrc || props.src).trim();
|
|
260
|
+
if (!hoverSource) return "";
|
|
261
|
+
if (props.hoverSrc && props.hoverImgSize == null) return props.hoverSrc;
|
|
294
262
|
return resolveHoverImgUrl(hoverSource, (_a = props.hoverImgSize) != null ? _a : DEFAULT_HOVER_IMG_SIZE);
|
|
295
263
|
});
|
|
296
264
|
const hoverImgStyle = computed(() => ({
|
|
@@ -326,12 +294,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
326
294
|
key: 0,
|
|
327
295
|
render: unref(viewImgDefaults).placeholder,
|
|
328
296
|
payload: slotProps
|
|
329
|
-
}, null, 8, ["render", "payload"])) : (openBlock(),
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
]))
|
|
297
|
+
}, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
|
|
298
|
+
key: 1,
|
|
299
|
+
loading: "",
|
|
300
|
+
src: slotProps.src,
|
|
301
|
+
"fallback-color": resolvedFallbackColor.value
|
|
302
|
+
}, null, 8, ["src", "fallback-color"]))
|
|
335
303
|
], true)
|
|
336
304
|
]),
|
|
337
305
|
_: 2
|
|
@@ -346,14 +314,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
346
314
|
]), 1040)
|
|
347
315
|
]),
|
|
348
316
|
default: withCtx(() => [
|
|
349
|
-
hoverPreviewSrc.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
350
|
-
referenceLoadError.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
317
|
+
hoverPreviewSrc.value || __props.showHoverOnError && isReferenceInvalid.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
318
|
+
referenceLoadError.value || !__props.src.trim() ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
351
319
|
!__props.isShowWatermark ? (openBlock(), createElementBlock("div", {
|
|
352
320
|
key: 0,
|
|
353
321
|
class: "fg-view-img-popover__hover-image fg-view-img-popover__hover-error",
|
|
354
322
|
style: normalizeStyle(hoverImgStyle.value)
|
|
355
323
|
}, [
|
|
356
|
-
_ctx.$slots.error ? renderSlot(_ctx.$slots, "error", { key: 0 }, void 0, true) : unref(viewImgDefaults).error ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
|
|
324
|
+
_ctx.$slots.error ? renderSlot(_ctx.$slots, "error", normalizeProps(mergeProps({ key: 0 }, defaultSlotPayload.value)), void 0, true) : unref(viewImgDefaults).error ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
|
|
357
325
|
key: 1,
|
|
358
326
|
render: unref(viewImgDefaults).error,
|
|
359
327
|
payload: defaultSlotPayload.value
|
|
@@ -361,8 +329,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
361
329
|
key: 2,
|
|
362
330
|
src: defaultSlotPayload.value.src,
|
|
363
331
|
"error-text": defaultSlotPayload.value.errorText,
|
|
364
|
-
"
|
|
365
|
-
}, null, 8, ["src", "error-text", "
|
|
332
|
+
"fallback-color": resolvedFallbackColor.value
|
|
333
|
+
}, null, 8, ["src", "error-text", "fallback-color"]))
|
|
366
334
|
], 4)) : (openBlock(), createBlock(_component_el_watermark, {
|
|
367
335
|
key: 1,
|
|
368
336
|
class: "fg-view-img-popover__watermark",
|
|
@@ -375,7 +343,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
375
343
|
class: "fg-view-img-popover__hover-image fg-view-img-popover__hover-error",
|
|
376
344
|
style: normalizeStyle(hoverImgStyle.value)
|
|
377
345
|
}, [
|
|
378
|
-
_ctx.$slots.error ? renderSlot(_ctx.$slots, "error", { key: 0 }, void 0, true) : unref(viewImgDefaults).error ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
|
|
346
|
+
_ctx.$slots.error ? renderSlot(_ctx.$slots, "error", normalizeProps(mergeProps({ key: 0 }, defaultSlotPayload.value)), void 0, true) : unref(viewImgDefaults).error ? (openBlock(), createBlock(unref(ViewImgDefaultRenderer), {
|
|
379
347
|
key: 1,
|
|
380
348
|
render: unref(viewImgDefaults).error,
|
|
381
349
|
payload: defaultSlotPayload.value
|
|
@@ -383,8 +351,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
383
351
|
key: 2,
|
|
384
352
|
src: defaultSlotPayload.value.src,
|
|
385
353
|
"error-text": defaultSlotPayload.value.errorText,
|
|
386
|
-
"
|
|
387
|
-
}, null, 8, ["src", "error-text", "
|
|
354
|
+
"fallback-color": resolvedFallbackColor.value
|
|
355
|
+
}, null, 8, ["src", "error-text", "fallback-color"]))
|
|
388
356
|
], 4)
|
|
389
357
|
]),
|
|
390
358
|
_: 3
|
|
@@ -396,8 +364,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
396
364
|
style: normalizeStyle(hoverImgStyle.value),
|
|
397
365
|
preview: false,
|
|
398
366
|
"oss-process": false,
|
|
399
|
-
"
|
|
400
|
-
"error-offset": __props.errorOffset,
|
|
367
|
+
"fallback-color": resolvedFallbackColor.value,
|
|
401
368
|
"error-text": __props.errorText,
|
|
402
369
|
loading: __props.loading,
|
|
403
370
|
fit: "contain"
|
|
@@ -408,12 +375,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
408
375
|
key: 0,
|
|
409
376
|
render: unref(viewImgDefaults).placeholder,
|
|
410
377
|
payload: slotProps
|
|
411
|
-
}, null, 8, ["render", "payload"])) : (openBlock(),
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
]))
|
|
378
|
+
}, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
|
|
379
|
+
key: 1,
|
|
380
|
+
loading: "",
|
|
381
|
+
src: slotProps.src,
|
|
382
|
+
"fallback-color": resolvedFallbackColor.value
|
|
383
|
+
}, null, 8, ["src", "fallback-color"]))
|
|
417
384
|
], true)
|
|
418
385
|
]),
|
|
419
386
|
_: 2
|
|
@@ -425,7 +392,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
425
392
|
]),
|
|
426
393
|
key: "0"
|
|
427
394
|
} : void 0
|
|
428
|
-
]), 1032, ["src", "style", "
|
|
395
|
+
]), 1032, ["src", "style", "fallback-color", "error-text", "loading"])) : (openBlock(), createBlock(_component_el_watermark, {
|
|
429
396
|
key: 2,
|
|
430
397
|
class: "fg-view-img-popover__watermark",
|
|
431
398
|
content: [resolvedWaterMarkTitle.value],
|
|
@@ -439,8 +406,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
439
406
|
style: normalizeStyle(hoverImgStyle.value),
|
|
440
407
|
preview: false,
|
|
441
408
|
"oss-process": false,
|
|
442
|
-
"
|
|
443
|
-
"error-offset": __props.errorOffset,
|
|
409
|
+
"fallback-color": resolvedFallbackColor.value,
|
|
444
410
|
"error-text": __props.errorText,
|
|
445
411
|
loading: __props.loading,
|
|
446
412
|
fit: "contain"
|
|
@@ -451,12 +417,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
451
417
|
key: 0,
|
|
452
418
|
render: unref(viewImgDefaults).placeholder,
|
|
453
419
|
payload: slotProps
|
|
454
|
-
}, null, 8, ["render", "payload"])) : (openBlock(),
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
]))
|
|
420
|
+
}, null, 8, ["render", "payload"])) : (openBlock(), createBlock(ViewImgErrorFallback, {
|
|
421
|
+
key: 1,
|
|
422
|
+
loading: "",
|
|
423
|
+
src: slotProps.src,
|
|
424
|
+
"fallback-color": resolvedFallbackColor.value
|
|
425
|
+
}, null, 8, ["src", "fallback-color"]))
|
|
460
426
|
], true)
|
|
461
427
|
]),
|
|
462
428
|
_: 2
|
|
@@ -468,7 +434,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
468
434
|
]),
|
|
469
435
|
key: "0"
|
|
470
436
|
} : void 0
|
|
471
|
-
]), 1032, ["src", "style", "
|
|
437
|
+
]), 1032, ["src", "style", "fallback-color", "error-text", "loading"])
|
|
472
438
|
]),
|
|
473
439
|
_: 3
|
|
474
440
|
}, 8, ["content"]))
|
|
@@ -491,7 +457,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({
|
|
|
491
457
|
};
|
|
492
458
|
}
|
|
493
459
|
}));
|
|
494
|
-
const ViewImgPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-
|
|
460
|
+
const ViewImgPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fe90e338"]]);
|
|
495
461
|
export {
|
|
496
462
|
ViewImgPopover as V
|
|
497
463
|
};
|
package/dist/ViewImgPopover.css
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
@charset "UTF-8";
|
|
2
2
|
/* :where 降低默认宽高优先级,避免压过外部 Tailwind 等工具类(如 w-[200px]) */
|
|
3
|
-
:where(.fg-view-img-popover__reference[data-v-
|
|
3
|
+
:where(.fg-view-img-popover__reference[data-v-fe90e338]) {
|
|
4
4
|
position: relative;
|
|
5
5
|
display: block;
|
|
6
6
|
width: 100%;
|
|
7
7
|
height: 100%;
|
|
8
8
|
}
|
|
9
|
-
.fg-view-img-popover__preview-icon[data-v-
|
|
9
|
+
.fg-view-img-popover__preview-icon[data-v-fe90e338] {
|
|
10
10
|
position: absolute;
|
|
11
11
|
top: 4px;
|
|
12
12
|
right: 4px;
|
|
@@ -18,26 +18,21 @@
|
|
|
18
18
|
color: var(--el-text-color-primary);
|
|
19
19
|
cursor: pointer;
|
|
20
20
|
}
|
|
21
|
-
.fg-view-img-popover__preview-icon[data-v-
|
|
21
|
+
.fg-view-img-popover__preview-icon[data-v-fe90e338]:hover {
|
|
22
22
|
color: var(--el-color-primary);
|
|
23
23
|
}
|
|
24
|
-
.fg-view-img-
|
|
25
|
-
display: block;
|
|
26
|
-
width: 40%;
|
|
27
|
-
height: 40%;
|
|
28
|
-
}
|
|
29
|
-
.fg-view-img-popover__hover-image[data-v-a3f15571] {
|
|
24
|
+
.fg-view-img-popover__hover-image[data-v-fe90e338] {
|
|
30
25
|
display: block;
|
|
31
26
|
vertical-align: top;
|
|
32
27
|
background: #7f7f7f;
|
|
33
28
|
}
|
|
34
|
-
.fg-view-img-popover__hover-image[data-v-
|
|
29
|
+
.fg-view-img-popover__hover-image[data-v-fe90e338] .fg-view-img__inner {
|
|
35
30
|
width: 100%;
|
|
36
31
|
height: 100%;
|
|
37
32
|
object-fit: contain;
|
|
38
33
|
}
|
|
39
|
-
.fg-view-img-popover__hover-image[data-v-
|
|
40
|
-
.fg-view-img-popover__hover-image[data-v-
|
|
34
|
+
.fg-view-img-popover__hover-image[data-v-fe90e338] .fg-view-img__placeholder,
|
|
35
|
+
.fg-view-img-popover__hover-image[data-v-fe90e338] .fg-view-img__error {
|
|
41
36
|
position: absolute;
|
|
42
37
|
inset: 0;
|
|
43
38
|
display: flex;
|
|
@@ -46,23 +41,7 @@
|
|
|
46
41
|
background: #f5f7fa;
|
|
47
42
|
line-height: 1.4;
|
|
48
43
|
}
|
|
49
|
-
.fg-view-img-popover__hover-
|
|
50
|
-
width: 100%;
|
|
51
|
-
height: 100%;
|
|
52
|
-
display: flex;
|
|
53
|
-
align-items: center;
|
|
54
|
-
justify-content: center;
|
|
55
|
-
color: #909399;
|
|
56
|
-
font-size: 13px;
|
|
57
|
-
text-align: center;
|
|
58
|
-
}
|
|
59
|
-
.fg-view-img-popover__hover-image[data-v-a3f15571] .fg-view-img__error-text {
|
|
60
|
-
color: #909399;
|
|
61
|
-
font-size: 13px;
|
|
62
|
-
line-height: 1.4;
|
|
63
|
-
text-align: center;
|
|
64
|
-
}
|
|
65
|
-
.fg-view-img-popover__hover-error[data-v-a3f15571] {
|
|
44
|
+
.fg-view-img-popover__hover-error[data-v-fe90e338] {
|
|
66
45
|
display: flex;
|
|
67
46
|
align-items: center;
|
|
68
47
|
justify-content: center;
|
package/dist/components/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { _ } from "../ArgHover.vue_vue_type_style_index_0_lang-CSymSDRl.js";
|
|
2
|
-
import { _ as _2 } from "../FgCascader.vue_vue_type_style_index_0_lang-
|
|
2
|
+
import { _ as _2 } from "../FgCascader.vue_vue_type_style_index_0_lang-CtUPO8fk.js";
|
|
3
3
|
import { _ as _3 } from "../CitySelect.vue_vue_type_script_setup_true_lang-DZp6834K.js";
|
|
4
4
|
import { _ as _4 } from "../DragResizable.vue_vue_type_style_index_0_lang-BePpQHve.js";
|
|
5
5
|
import { _ as _5 } from "../HSelectAll.vue_vue_type_script_setup_true_lang-xHFbYs59.js";
|
|
@@ -31,8 +31,8 @@ import { S } from "../SelectAddress-CCepDxu8.js";
|
|
|
31
31
|
import { S as S2 } from "../SelectTree-BHvvkiQi.js";
|
|
32
32
|
import { S as S3 } from "../SvgIcon-DIg0upEk.js";
|
|
33
33
|
import { T } from "../TextCopy-lpbeqOUI.js";
|
|
34
|
-
import { F, V, c as c2, r as r2, u } from "../ViewImg-
|
|
35
|
-
import { V as V2 } from "../ViewImgPopover-
|
|
34
|
+
import { F, V, c as c2, r as r2, u } from "../ViewImg-CLRjYOUN.js";
|
|
35
|
+
import { V as V2 } from "../ViewImgPopover-BtFnYval.js";
|
|
36
36
|
import { I, P, g as g2, u as u2, a as a2 } from "../imgViewerStore-Ajm-L7R5.js";
|
|
37
37
|
import { V as V3 } from "../VirtualTable-Cm_L7q9W.js";
|
|
38
38
|
export {
|
|
@@ -5,7 +5,16 @@ type ObjectFit = "fill" | "contain" | "cover" | "none" | "scale-down" | "";
|
|
|
5
5
|
type __VLS_Props = {
|
|
6
6
|
src?: string;
|
|
7
7
|
fit?: ObjectFit;
|
|
8
|
+
/**
|
|
9
|
+
* 是否懒加载:为 true 时进入视口(或 scrollContainer)后再请求图片
|
|
10
|
+
* (IntersectionObserver;非仅原生 loading="lazy")
|
|
11
|
+
*/
|
|
8
12
|
lazy?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* 懒加载滚动根;未传时相对浏览器视口。
|
|
15
|
+
* 自定义 overflow 容器需传入选择器或 HTMLElement,否则可能判定为“已在视口内”而立刻加载。
|
|
16
|
+
*/
|
|
17
|
+
scrollContainer?: string | HTMLElement | null;
|
|
9
18
|
/** 外部 loading 状态,为 true 时展示 placeholder */
|
|
10
19
|
loading?: boolean;
|
|
11
20
|
/** 是否开启点击预览大图 */
|
|
@@ -50,12 +59,8 @@ type __VLS_Props = {
|
|
|
50
59
|
renderExtraTools?: VNode | null;
|
|
51
60
|
/** 内置工具栏按钮配置 */
|
|
52
61
|
originalToolbar?: OriginalToolbarItem[];
|
|
53
|
-
/**
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* @deprecated 旧版 FgErrorImage 参数,内置双态占位不再使用;保留以兼容业务传参
|
|
57
|
-
*/
|
|
58
|
-
errorOffset?: number;
|
|
62
|
+
/** 内置占位图标 / 文案色;作用于加载中 / 无图 / 加载失败;未传用设计默认色 */
|
|
63
|
+
fallbackColor?: string;
|
|
59
64
|
/** 加载失败文案;未传默认「加载失败」。空 / 仅空白 src 固定显示「无图」 */
|
|
60
65
|
errorText?: string;
|
|
61
66
|
/** 是否对 src 做 OSS / TEMU 缩略图处理,需先在应用入口 configureImgUrl 注入 ossLinks */
|
|
@@ -82,8 +87,7 @@ declare function __VLS_template(): {
|
|
|
82
87
|
loading: boolean;
|
|
83
88
|
loadError: boolean;
|
|
84
89
|
errorText: string;
|
|
85
|
-
|
|
86
|
-
errorOffset: number;
|
|
90
|
+
fallbackColor: string;
|
|
87
91
|
}): any;
|
|
88
92
|
error?(_: {
|
|
89
93
|
src: string;
|
|
@@ -91,11 +95,12 @@ declare function __VLS_template(): {
|
|
|
91
95
|
loading: boolean;
|
|
92
96
|
loadError: boolean;
|
|
93
97
|
errorText: string;
|
|
94
|
-
|
|
95
|
-
errorOffset: number;
|
|
98
|
+
fallbackColor: string;
|
|
96
99
|
}): any;
|
|
97
100
|
};
|
|
98
|
-
refs: {
|
|
101
|
+
refs: {
|
|
102
|
+
rootRef: HTMLSpanElement;
|
|
103
|
+
};
|
|
99
104
|
rootEl: any;
|
|
100
105
|
};
|
|
101
106
|
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
@@ -139,7 +144,7 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
|
|
|
139
144
|
previewTeleported: boolean;
|
|
140
145
|
fit: ObjectFit;
|
|
141
146
|
errorText: string;
|
|
142
|
-
|
|
147
|
+
fallbackColor: string;
|
|
143
148
|
initialIndex: number;
|
|
144
149
|
toolbarBgColor: string;
|
|
145
150
|
toolbarIconColor: string;
|
|
@@ -152,12 +157,14 @@ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
|
|
|
152
157
|
originalToolbar: OriginalToolbarItem[];
|
|
153
158
|
previewSideNav: PreviewSideNav;
|
|
154
159
|
defImgPreviewIndex: number;
|
|
155
|
-
|
|
160
|
+
scrollContainer: string | HTMLElement | null;
|
|
156
161
|
ossProcess: boolean;
|
|
157
162
|
ossLinks: string[];
|
|
158
163
|
imgSize: ImgSizeOptions;
|
|
159
164
|
previewStripQuery: boolean;
|
|
160
|
-
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
|
|
165
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
|
|
166
|
+
rootRef: HTMLSpanElement;
|
|
167
|
+
}, any>;
|
|
161
168
|
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
162
169
|
export default _default;
|
|
163
170
|
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
type __VLS_Props = {
|
|
2
|
+
/** 为 true 时展示「加载中」(优先于无图 / 失败) */
|
|
3
|
+
loading?: boolean;
|
|
2
4
|
/** 原始图片地址;空或仅空白走「无图」态 */
|
|
3
5
|
src?: string;
|
|
4
6
|
/** 加载失败文案;未传时默认「加载失败」 */
|
|
5
7
|
errorText?: string;
|
|
6
|
-
/**
|
|
7
|
-
|
|
8
|
+
/** 内置占位主色;未传用设计默认色;传入后按主色派生浅淡色 */
|
|
9
|
+
fallbackColor?: string;
|
|
8
10
|
};
|
|
9
11
|
declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
12
|
+
loading: boolean;
|
|
10
13
|
src: string;
|
|
11
14
|
errorText: string;
|
|
12
|
-
|
|
15
|
+
fallbackColor: string;
|
|
13
16
|
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
|
|
14
17
|
export default _default;
|
|
@@ -5,8 +5,8 @@ export interface ViewImgDefaultSlotPayload {
|
|
|
5
5
|
loading: boolean;
|
|
6
6
|
loadError: boolean;
|
|
7
7
|
errorText: string;
|
|
8
|
-
|
|
9
|
-
|
|
8
|
+
/** 内置占位图标 / 文案色 */
|
|
9
|
+
fallbackColor: string;
|
|
10
10
|
}
|
|
11
11
|
export interface ViewImgGlobalDefaults {
|
|
12
12
|
/** FgViewImg 默认加载占位内容;低于组件自身 #placeholder 插槽优先级 */
|