yanzhen-design-vue
Version:
143 lines (142 loc) • 5.34 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const vViewer = require("v-viewer");
const imageViewer = require("./image-viewer.cjs");
function useImageViewer(props) {
const options = vue.ref({ ...imageViewer.PICTURE_VIEWER_OPTIONS });
const viewer = vue.ref(null);
const imageUrls = vue.ref([]);
const imageNames = vue.ref([]);
const curImg = vue.ref(0);
const curImgTitle = vue.ref("");
const openViewer = (images, index, imagesInfo) => {
let _index = index;
let _imagesInfo = imagesInfo;
if (props == null ? void 0 : props.isUploadViewer) {
_index = props.fileList.findIndex((ele) => ele.url === images.url);
_imagesInfo = {
onlyUrl: false,
images: props.fileList
};
}
getImagesPreviewInfo(_imagesInfo);
curImgTitle.value = imageNames.value[_index] || "";
curImg.value = _index + 1;
console.log("【图片预览】指令方式使用", imageNames.value, imageUrls.value, vue.unref(imageUrls));
setTimeout(() => {
var _a, _b;
(_a = vue.unref(viewer)) == null ? void 0 : _a.destroy();
viewer.value = vViewer.api({
images: vue.unref(imageUrls),
options: vue.unref(options)
});
if ((_b = viewer.value) == null ? void 0 : _b.ready) {
createViewerElements();
viewer.value.view(_index);
}
}, 500);
};
const createViewerElements = () => {
createImageViewerTop();
createImagePrev();
createImageNext();
createImageCounts();
};
const createImageViewerTop = () => {
const titleElement = document.createElement("div");
titleElement.className = "title";
titleElement.innerText = curImgTitle.value;
const iconCloseElement = document.createElement("span");
iconCloseElement.className = "icon iconfont icon-b_close img-close";
iconCloseElement.addEventListener("click", (e) => {
var _a;
e.stopPropagation();
(_a = viewer.value) == null ? void 0 : _a.hide();
});
return imageViewer.createCustomElementWithChildren(
"image-viewer-top",
[titleElement, iconCloseElement],
null
);
};
const createImagePrev = () => {
const iconPrevElement = document.createElement("span");
iconPrevElement.className = "icon iconfont icon-b_flipping_pages icon-prev-next";
return imageViewer.createCustomElementWithChildren("image-prev image-prev-next", [iconPrevElement], () => {
handlePrevNext("prev");
});
};
const createImageNext = () => {
const iconNextElement = document.createElement("span");
iconNextElement.className = "icon iconfont icon-b_flipping_pages icon-prev-next transform-rotate";
return imageViewer.createCustomElementWithChildren("image-next image-prev-next", [iconNextElement], () => {
handlePrevNext("next");
});
};
const viewerMethods = ["prev", "next", "destroy", "hide", "full", "exit", "zoomTo"];
const handlePrevNext = (type) => {
if (viewer.value && viewerMethods.includes(type)) {
viewer.value[type]();
}
};
const createImageCounts = () => {
const countsContainer = document.querySelectorAll(".image-viewer-counts");
if (!countsContainer.length) {
const countsContainer2 = document.createElement("div");
countsContainer2.className = "image-viewer-counts";
const countElement = document.createElement("div");
countElement.className = "image-viewer-count";
countElement.innerText = `${curImg.value}/${imageUrls.value.length}`;
countsContainer2.appendChild(countElement);
document.body.appendChild(countsContainer2);
}
};
const getImagesPreviewInfo = (imagesInfo) => {
imageUrls.value = [];
const { onlyUrl, images } = imagesInfo;
const names = images.map((el, i) => {
var _a;
let url;
if (onlyUrl) {
url = el;
} else {
url = el.url;
}
const urlObj = new URL(url);
const parts = urlObj.pathname.split("/");
const lastPart = parts.pop();
const filename = lastPart ? decodeURI(lastPart) : "default-filename";
const fileType = (_a = (filename || "default-filename").split(".").pop()) == null ? void 0 : _a.toLowerCase();
const isCanPreview = imageViewer.imgCanPreviewFormats.includes(fileType || "");
const imageUrl = url;
const finalImageUrl = isCanPreview ? imageUrl : `${imageUrl}?query=${i}`;
imageUrls.value.push(finalImageUrl);
return filename;
});
imageNames.value = onlyUrl ? names : images.map((ele) => typeof ele === "string" ? "" : ele.name || "") || [];
};
const updateViewerInfo = () => {
const countsContainer = document.querySelector(".image-viewer-counts");
if (countsContainer) {
const countElement = countsContainer.querySelector(".image-viewer-count");
countElement.innerText = `${curImg.value}/${imageUrls.value.length}`;
}
const topContainer = document.querySelector(".image-viewer-top");
if (topContainer) {
const titleElement = topContainer.querySelector(".title");
titleElement.innerText = `${curImgTitle.value}`;
}
};
return {
options,
viewer,
imageUrls,
imageNames,
curImg,
curImgTitle,
openViewer,
updateViewerInfo
};
}
exports.useImageViewer = useImageViewer;