yanzhen-design-vue
Version:
90 lines (89 loc) • 2.54 kB
JavaScript
import { computed, unref } from "vue";
import { useVModelValue } from "@yanzhen-libs/utils-vue";
import { isEmptyObject } from "@yanzhen-libs/utils";
import { useFileListConfig } from "./hooks/use-file-list-config.mjs";
import { usePreviewConfig } from "./hooks/use-preview-config.mjs";
function useUploadImagePreview(props, emit) {
const { fileListRef, isImageUrl } = useFileListConfig(props, emit);
const { previewConfig } = usePreviewConfig(props);
const previewId = useVModelValue(props, "preview", emit);
const imageListRef = computed(() => {
var _a;
const imageList = unref(fileListRef).filter((file) => isImageUrl(file));
let id = unref(previewId);
switch (true) {
case id === true:
case (!isEmptyObject(id) && (id == null ? void 0 : id.visible) === true):
id = (_a = imageList[0]) == null ? void 0 : _a.uid;
break;
}
return imageList.map((file) => {
const visible = id === file.uid;
return {
src: file == null ? void 0 : file.url,
width: 200,
visible,
uid: file.uid,
onVisibleChange(visible2) {
if (visible2) {
previewId.value = file.uid;
} else {
previewId.value = false;
}
}
};
});
});
const preview = computed(() => {
const imageList = unref(imageListRef);
const find = imageList.find(({ visible }) => visible);
return find ? {
visible: find.visible,
onVisibleChange(visible) {
previewId.value = visible;
}
} : false;
});
const handlePreviewImage = (file) => {
var _a;
if (unref(previewConfig).preview) {
if ((_a = file.type) == null ? void 0 : _a.startsWith("image/")) {
previewId.value = file.uid;
return;
} else if (file.url) {
window.open(file.url);
}
}
emit == null ? void 0 : emit("preview", file);
};
const exposeCtx = {
close: handleClosePreviewImage,
open: handleOpenPreviewImage,
previewImage: handlePreviewImage
};
function handleOpenPreviewImage(file) {
if (!file) {
previewId.value = true;
} else {
handlePreviewImage(file);
}
}
function handleClosePreviewImage() {
previewId.value = false;
emit == null ? void 0 : emit("close");
}
return {
isImageUrl,
id: previewId,
preview,
fileListRef,
imageListRef,
exposeCtx,
handleOpenPreviewImage,
handleClosePreviewImage,
handlePreviewImage
};
}
export {
useUploadImagePreview
};